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. Very cool, but the fact that it won’t work in IE8 is still a deal-breaker in my world. What a bummer.

  2. Why do/does the graphics and text in modal view appear blurry?? is there a way to make them more crisp like boot straps modal clarity/quality??

  3. I’m a novice trying to get this to work on a mobile device and want to add content that exceeds the viewing area. Is there a way to make a nice scrolling affect to the modal?

  4. When I`m trying to trigger the modal window, I`m geting an error:
    Method not allowed…

  5. not working with multiple modal

    I have a Login modal and a Cart modal but .md-overlay not work. So i can’t close modal with out click

    If add after login modal => only login modal is work.

    And if add after Cart modal => only Cart modal is work.

    And i need 1 button can trigger 2 modal . because, i using php with modal Cart empty and Cart added items

    Give me some solutions?

    Sorry my bad English

    • You can wrap a view in a ModalView like this:
      _buildModal: function(subview) { var modal = new ModalView({ subView: subview }); subview.on('accept', function() { modal.close(); }); subview.on('cancel', function() { modal.close(); }); return modal; }

      I had this same issue and this was my solution.

  6. i made html page, inside of it i put icons and when i press on them the modal window is open.
    so far so good, but when i put the html page (include) inside of a header.php in wordpress the function doesn’t work.
    need some help!

  7. HIII

    this can be use for multiple different windows???
    contact me by email, please?? :)))

    Very nice and beautiful, congrats! 🙂

    thanksss

  8. I really like your work. Can you please explain how to call the modal boxes using jQuery ?

  9. COuld YOu Please Tell ME how to add it to blogger?
    PLease Mail Me.
    I Would be glad.

  10. i have problem with button that created dinamically , when i create some button element dinamically with jquery … your plugin not work … and just effect when a button exist on first html codes …

    how can i fix it ?
    thanx

  11. I didn’t want to have a close button on my modal, so I got an error in modalEffect.js. It’s really simple to fix, I just verify if ‘close’ is undefined.


    if(close){
    close.addEventListener( ‘click’, function( ev ) {
    ev.stopPropagation();
    removeModalHandler();
    });
    }

    Just in case you want to fix this. =)

    }

  12. Anyone know how to do this using links instead of buttons?

    I am doing with with

    and then later calling

    Modal Dialog

    This is a modal window. You can do the following things with it:

    Read: Modal windows will probably tell you something important so don’t forget to read what it says.
    Look: modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.
    Close: click on the button below to close the modal.

    Close me!

    and still nothing works?

    JavaScript and CSS styles have definitely been added correctly

  13. Please Tell Me How to stop playing video when modal window closes?
    I put some video with IFRAME from YouTube
    <div class="md-modal md-effect-5" id="modal-5"> <div class="md-content"> <h3>Modal Dialog</h3> <div> <p>This is a modal window. You can do the following things with it:</p> <iframe width="560" height="315" src="//www.youtube.com/embed/UvGUzcn2WSE" frameborder="0" allowfullscreen></iframe> <ul> <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>

  14. This is awesome. I have a similar issue to Jerod.

    I have more content then a screenful and would like to either have the Modal Scroll instead of the page in the background (webpage) or add a fixed height size and scroll to the Modal so that the “close” is always visible on the screen

  15. Hai..
    This is awesome project.
    I finished and successfully add this on my blog.

  16. Beautiful template, thanks to the whole team.

    I would like to make only a small change, but can not figure out how.
    I would like the departed pop up automatically when the page, does anyone know how to do?

    Many thanks in advance,
    Dalila

  17. Thanks for this Mary. I’ve gone ahead and rewrote this in sass for anyone interested. You can find it on github.

  18. Hey, I’m using the “Just Me” effect. I was wondering if anyone can help me with a way to use the close button to also trigger another modal to open so it’s like the user sees the next lot of content in the modal?

    I see there is a class “md-close” that closes the modal and another “md-trigger” that works with the data-model to open a modal. I wondered if it would possible to close the existing modal and open a new modal using both at the same time so it was like the user stayed in the modal and just saw the next lot of content? I tried using the class=”md-close md-trigger” along with data-modal=”modal-2″ but it didn’t work. Can anyone help?

  19. 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.querySelector( ‘.md-close’ );

  20. if you add
    filter: blur(0); -webkit-filter: blur(0);

    there is no blurry text anymore

  21. for those who have blurry modals try to use this line:
    -webkit-filter: blur(0);
    in .md-modal class

  22. I just stumbled upon this, and it is what I want to do. But since I am a beginner, can someone help me regarding how to use these features in a website.

    Thank you!