Nifty Modal Window Effects

A set of experimental modal window appearance effects with CSS transitions and animations.

ModalWindowEffects

Today we want to share some ideas for modal window effects with you. There are infinite possibilities for transitioning the appearance of a dialog box and we wanted to provide some ideas of how to show dialog boxes and provide some inspiration.

The idea is to have a trigger button (or any element) which will make a modal window appear on click using a simple transition (or animation).

Please note: this only works as intended in browsers that support the respective CSS
properties. Modern browsers only!

There are some knows issue with using visibility/opacity for iOS < 6 Mobile Safari, so this probably won't work on older devices.

The structure of the modal window consists of a main wrapper and a content division:

<div class="md-modal md-effect-1" id="modal-1">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> Modal windows will probably tell you something important so don't forget to read what it says.</li>
				<li><strong>Look:</strong> modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>

...

<div class="md-overlay"></div>

The main wrapper is used as a container that will simply be shown or hidden (with visibility, using the class “md-show”) and the inner content will have the transition. The overlay is placed after the modal(s), so we can control the appearance using the adjacent sibling selector:

.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	backface-visibility: hidden;
	transform: translateX(-50%) translateY(-50%);
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(143,27,15,0.8);
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

For some effects we will also add a class to the html element. We want this for creating some 3D effects on the body and the content. Note that we are assuming that all the content of the page (except the modal and the overlay) are wrapped in a container:

.md-perspective,
.md-perspective body {
	height: 100%;
	overflow: hidden;
}

.md-perspective body  {
	background: #222;
	perspective: 600px;
}

.container {
	background: #e74c3c;
	min-height: 100%;
}

To be able to control each effect, we use an additional effect class to define what kind of transition we want for that specific modal window. An example for an individual effect is the following:

/* Effect 5: newspaper */
.md-show.md-effect-5 ~ .md-overlay {
	background: rgba(0,127,108,0.8);
}

.md-effect-5 .md-content {
	transform: scale(0) rotate(720deg);
	opacity: 0;
	transition: all 0.5s;
}

.md-show.md-effect-5 .md-content {
	transform: scale(1) rotate(0deg);
	opacity: 1;
}

The trigger buttons will have a data-attribute that holds the reference to the modal box that we want to show:

<button class="md-trigger" data-modal="modal-5">Newspaper</button>

For the special perspective cases, we’ll also add the class “md-setperspective” to the trigger button.

With JavaScript we’ll simple add the class “md-show” to the respective modal when we click on a button, and, if indicated, the “md-perspective” class to the html element.

To experiment with new effects, add a new button and a new modal with an effect class and an ID, referencing to that ID in the button’s data-attribute “data-modal”. Then you can add another set of styles for that specific effect.

If you only want the effect/transition to happen when the modal window appears, but not when it disappears, just add the transition to the “.md-show.md-effect-x .md-content” declaration (like we did for some of the examples).

For the background blur effect we are using Polyfilter by Christian Schaefer to support older browsers.

I hope you enjoyed these little effect ideas and find them inspiring!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 228

Comments are closed.
  1. Good work and nice animations! But please, the red color is blinding! πŸ™‚

  2. there are a lot of plugins that help you with modals, but lack the design perspective. amazing work, and only with html and css3. Thank you, Mary.

  3. Great stuff. Anyone know about allowing access to what’s behind the modal? I’m interested in doing something similar to the gmail compose window. Where I can open a modal in a fixed bottom right position but still interact with the content behind. I suppose setting overlay width/height to 0% might be the way to go?

  4. Wow!! Thanks for another great tutorial. and i like the red… πŸ™‚ miniMAC

  5. Hi Marylou, this demo does not work properly in Mac/Safari, other than that it is a gorgeous example of using css3.

  6. Love the blur effect. Unfortunately it’s way too heavy to be used in such large scale..

  7. Hi Mary Lou,

    I was working on something very similar: a combination of the and MagnificPopup and animate.css. Now, I really wonder if I should finish it hehe.

    My guess is that MagnificPopup is a bit more flexible and powerful than you custom lightbox, but I might be wrong. Any comment?

  8. Perfect…the only question I have is if there is a way to figure out if the user has a browser
    that supports css3 and if not, provide a fallback.

    As we can provide fallback when there is no javascript.

  9. Awesome effects. I get weird rendering on my Chrome though… The box does not completly look solid, looks like a break or something. I am using 27 inch iMac with the latest version of Chrome: http://imgur.com/E4Xqzgj

    • Hey Roman, that looks weird indeed. I have a strange feeling that this has to do with using ems. A pixel-based approach should avoid something like that I believe. Thanks for your feedback! Cheers, ML

    • I’m getting the same thing. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
      Works fine in FF 22.
      In Safari 6.0.5, it looks like the scaling doesn’t finish correctly because the modal contents are blurry (but there’s no line like in Chrome). See http://cl.ly/image/3G2c0S2x3H30
      Weirdly, Opera Next 15 looks fine.
      And Chrome Canary is looking fine. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.3 Safari/537.36
      Maybe it’s just Chrome 27?

  10. Thanks Once Again, for the inspiration!
    Codrops has become my go to for design inspiration.
    Your contributors and staff have excellent realistic approaches to the design dilemma
    keeping it original and unique. nothing more nothing less.
    Keep up the great work.
    The more things change, the more they stay the same.

  11. Greetings!
    Excellent showcase.
    Too bad the Blurred effect cant still be executed on IE. Tested it on ie10 too

    Thanks
    Love from Portugal
    JD

  12. Great!
    Last week I developed something very similar for one of my clients but didn’t have the chance to experiment with all the transitions and didn’t think about the sibling… cool stuff, thank you.

  13. I am always a big fan! Modals are one of those things I always take for granted until I need them. Then I look to posts like this to spark my creativity. Thanks gain for being…..well who you are! πŸ™‚

  14. Hi Mary Lou,

    Is there anyway or option that can change the code so they window popup upon page load?

  15. It’s really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really cool !

  16. Really impressive, it gives me some useful inspirations and/or ways to do things like that.

    Thanks !

  17. Very cool, but clean effects. Not too gaudy or tacky with a great appreciation for design. Very nicely done. Thanks for sharing! πŸ™‚

  18. close = modal.querySelector( ‘.md-close’ );

    When I put multiple close buttons with the same CSS, the function applies only to the first one it finds. How can make it work for every .md-close there is? Thanks.

    • close = modal.querySelectorAll( β€˜.md-close’ );

      querySelector selects only the first element it finds, querySelectorAll selects – as it says – all element that match the selector.

    • Same here, but only in Chrome (Win8).
      It has opacity: 0.8 on .md-content h3

      I removed the opacity and it’s a bit nicer

    • you have to remove -webkit-backface-visibility for the md-modal class in the component.css file. Chrome font rendering is quite buggy with the 3D stuff…

  19. Ok, this is stunning, great, wonderful!
    But, is it just me or it doesn’t work at all on IE8?

  20. Mary,

    I would like to know how to display the popups on “hover” instead of “on click”. Can you help us with that?

    Thanks!

    • You can change the eventlisteners in ModalEffects.js to apply on mouseover and mouseout.

  21. Some cool CSS effects! I always get a lot out of your posts Mary Lou–thanks for all the hard work!

  22. Really cool! Having different transitions than just the normal static popup effect will make them less annoying. Thank you!

  23. Hi, I`ve tried to implement the code but I have some problems, the effects did`nt worked. When I saw the browser console it says:
    “Detected localhost or IP address. Assuming you are a developer. Caching of stylesheets is disabled.” , then I put it in a web server and it shows
    “Caching of stylesheets is enabled. You need to refresh twice to see any changes.” .
    In both cases it appears a message too “Failed to load resource: the server responded with a status of 404 (Not Found) “. I Don`t know what happens, can anyone help me, please? I’m using WordPress in my site.