70+ CSS Modal Windows - Free Code + Demos

Easing is not easy! However, with the right easing from the Material Design guidelines, you get punchy and snappy animations.

Html integration of rémi's pop-up https://twitter.com/sandwich_cool/status/1031573773294682112

popup overlay using html and css and javascript

CSS only content modal. No JavaScript required.

Step through on-boarding (or whatever, really) screens in a modal horizontally or vertically.

Messing around with HTML5's dialog element

Two call-to-action buttons that give context to your modals in a Material Design fashion.

Material Design inspired modals. No jQuery required. Responsive. Read the how to on Ettrics.com

Modal animated ModalX

Using the ol' label, checkbox trick to launch a modal window. All CSS. No JavaScript required.

Yet another modal box! Yippee! Use it if you want.

A challenge to create a confirm modal without any JavaScript. Probably not usable in production, but still it works.

Modal that animate opens with animation clip-path. Observe clip-path aren't hardware accelerated or works in IE anything.

A call-to-action button that animates and turns into a full-size modal window. The final result is powered by a combination of CSS transition and transformations, jQuery and Velocity.js. Tutorial & Download on CodyHouse: http://codyhouse.co/gem/morphing-modal-window/

The idea is to replace the path of the button container into origami path step by step. Enjoy!

Inspired by Mac OS X minimize interaction. Built with SVG and Greensock Plugin.

Flexbox modal example. It's responsive, easy to integrate and extend, and passes content and values via data-attributes. Was looking for a simple approach that was not reliant on any library. Straight CSS/jQuery. Enjoy :)

Simple modal window equipped with smooth CSS3 transitions. Commonly used for viewing annoyingly important content upon visiting a website.

This looked a lot better in my head. At 3am.

Purely css-driven popup dialog with a soothing transition animation and background blur

Essentially, I am using the input's checked pseudo class to manipulate the styles of the modal and label using sibling selectors.

Responsive modal dialog using css only, including sliding/carousel content inside the modal.

A call-to-action button that animates and turns into a full-size modal window. The final result is powered by a combination of CSS transition and transformations, jQuery and Velocity.js. Tutorial & Download on CodyHouse: http://codyhouse.co/gem/morphing-modal-window/

Messing around with keyframe/transition physics for a modal. Mostly focused on the timing between the overlay, modal container, and modal content to try to make the whole event look more organic. Believe it or not, inspired by the menu pop-ups in Super Mario 3D. Enjoy

Fun little modal concept I made to practice with keyframes and implied depth. Hope to implement this in a project at some point.

Neat little way to give your page some depth

Here's a popup that appears while blurring out the body underneath. click the 'X' close on the popup and the blur transition back while the popup fades off. Suitable for sites that may want a nag (perhaps for donation or subscription services) or could be re-purposed as a general modal or...

Read More

Modal draws then fades in using SVG & CSS Animation

Animated Slide down modal with browser back support. no JS Animated Slide down modal with tabs. no JS

Building off of a translucency exercise that I completed a few days ago. This one is even more fun!

Simple responsive confirmation dialog box, with a subtle CSS3 entry animation. http://codyhouse.co/gem/simple-confirmation-popup/

Based on: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

jquery just to add class, not required. not using bootstrap at all

I'm using labels as a triggers for checkbox which state indicates visibility of modal box.

Adding an additional blur to the background content when opening an overlay. The blur is not animated, which doesn't seem necessary when the additional overlay and modal are. The blur is achieved with an SVG filter, rather than a CSS filter, for better support across browsers.

Animates opacity and visibility to make a modal fade out and then truly get out of the way. Read more: The Surprising Things That CSS Can Animate