Nifty Modal Window Effects

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

ModalWindowEffects

From our sponsor: Try Mailchimp today.

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:

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

Feedback 228

Comments are closed.
  1. Hello,

    Congratz for this work.

    I´ve one question, how can i use/call the modal window without using a trigger button?

    Regards,

  2. That’s a fantastic way to manage modal windows.
    However I need help in order to use it with AJAX.

    How to attach a modal window to a “.md-trigger” button generated lively with AJAX.

    I tried with teh Ernest Marciano JQuery plugin but I did’nt find the way to do it.
    Thanks to everybody can help.

  3. Hi,

    I have been messing around with this. I have added a responsive contact form into the modal however the text looks blurry. Is this a WebKit issue? Is there a piece of css code to fix this?

    Thank you for such an awesome website!

    Kind regards,

    Matt

  4. hello, first of all congratulations for this tutorial and code, it is fantastique.
    I have a question I would like to add a big content , then How can I make the modal scrollable?
    thx

  5. Hello everybody!
    Awesome, fantastic these Nifty Modal Windows Effects!!
    😉

    I would like to know how to display the modals when “page loads” instead “on click” or hover. Can anyone help me with that? Thanks a lot!

  6. Author large reskpekt, looking for those Windows! All easily and quickly adapted to your site and changed the color gamut!

  7. Hi, I am attempting to put a contact form in one of the modal windows and was curious how to add a button that “closes” the modal window. Right now the buttons seem to function as form submit buttons. I just want to “close” the window if they cancel the contact form.

  8. Great work Mary Lou, AS USUAL!

    Can someone help me with this, i am trying to use two different modal effects (Fade and slide bottom) under the same page but only one of them works!

    Am i missing something?

    Thank you!

  9. Hi Mary, I also have a love for freshly ground peppercorns lol

    I was wondering if anyone else has had issues calling the modals? Check out what I’m working on, http://sarahphillipsnewyork.com/home.php
    – Clicking Details for the first ‘slide’ works but the remaining slides do not. The strange thing is I had this working at one point, all Detail buttons would pop up a modal, now it’s only the first.

    Any ideas? Thank you in advanced!
    Will

  10. Can someone help me with this????
    i am trying to use two different modal effects (Fade and slide bottom) under the same php page but only one of them works!

    I added two classes under the “modalEffects.js” like the example below
    [].slice.call( document.querySelectorAll( '.signup, .signin' ) ).forEach( function( el, i ) {

    Am i missing something?
    Thank you so much!

  11. Whenever the button get clicks. I don’t need to show dialog always. I should hide the model dialog based on some conditions.
    Anyone there to know how to do?

  12. nice window effects, i have implemented it but having issues how to lose the window when i click a custom button or id rather than the .md-close. is there a code to close the window say like

    $(‘.md-trigger’).close();

  13. I got a solution to the close issue. I modify the class and remove the “md-show” class.

    $(‘.md-modal’).removeClass(‘md-show’);

    this will close the window and do the effect too.

  14. Anyone getting JS errors when they’ve opened up a modal box?

    Everything is working fine for one of my modals despite the same error appearing in the console… But the second one i implemented seems to be closing strangely and doesn’t appear with any transition

    ‘Uncaught TypeError: Cannot call method ‘removeEventListener’ of null’

    Also, I’m not using the pollyfill or the parser scripts as they generate about 5 crazy errors. Some of which are related to using Google Fonts and it pops an alert that says:

    ‘Please configure the polyfill’s absolute(!) script path before referencing the css-filters-polyfill.js, like so:
    var polyfilter_scriptpath = “/js/css-filters-polyfill/”;’

    But I have no idea where to change this… Any ideas anyone?

  15. Nice effects.
    Thank you for this.
    I had one with both modal and container zoom.
    css :
    /* Effect 20: Make way zoom */ .md-effect-20 .md-content { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .md-show.md-effect-20 .md-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .md-effect-20 ~ .container { height: 100%; overflow: hidden; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .md-show.md-effect-20 ~ .container { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }

  16. Hi,

    The pop-ups transition effect doesn’t work as expected in chrome12, is there any fix for it??

    Thank You,
    Tani

  17. I’ve put together a quick solution for those who are looking to get this working with Ajax-loaded content, by just adding a couple of code snips – one to your Ajax code, and one to the modalEffects.js file.

    I’ve managed it by adding an Ajax Custom Event, and then adding a listener for that which re-runs the modalEffects.js init() function.

    To the end of your Ajax callback add in:

    var ajaxEvent = new CustomEvent( 'ajaxLoaded' ); document.dispatchEvent(ajaxEvent);

    and then, just after line 56 of your modalEffects.js file (“init()”), add a new line with:

    document.addEventListener('ajaxLoaded', init);

    Cheers, Dan

    • Hi Dan,

      Do you have a sample or something? I tried it but its not working for me…this is what I did:

      –html–

      –js–
      $(“md-trigger”).on(‘click’, function(event){
      $(‘#stage’).load(‘eventdetails.html’, function(){
      var ajaxEvent = new CustomEvent(‘ajaxLoaded’);
      document.dispatchEvent(ajaxEvent);
      });
      });

      also added per ur suggestion in modalEffects.js:

      document.addEventListener(‘ajaxLoaded’, init);

    • Hi Shubra,

      I think you may be after a slightly different usage than I intended – the script I included was basically to add md-trigger functionality to any elements that are loaded after the initial pageload. I notice your code is being activated on click of md-trigger, are you trying to fire the modal and then load in your ajax content?

    • To get it working with AJAX-LOADED content you can use the JQuery version : jquery.modalEffects.js.
      Then when fire function use this code :

      $(document).on(‘ready ajaxComplete’, function() {
      $(‘.md-trigger’).modalEffects();
      });

      So everything called inside will be bind to elements when document loaded and to ajax-loded content elements.

  18. Has anyone come up on the issue where you have 2 modals with 2 different modal ids conflicting? They both work fine but the click on the overlay doesnt work on the modal that is second in the list.

  19. Can this modal be fired by on load rather than on click? Can it be fired with a ‘timer’ effect, ie. the modal is invoked after say, 2 seconds after load and then dismisses after say, 10 seconds?

  20. How would i go about linking this to an a href, so instead of clicking a button it ill work when i click on a link.

  21. Hey, i tried running this on a mobile device, however the content boxes are not responsive when you go into landscape view.

    If somebody could help me with this i would highly appreciate it.

  22. To fix the problem with Safari (for windows), just add -webkit-transition: opacity 0.5s to the following:

    .md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s;
    }

  23. Incredible effects! And thank you for sharing them!

    And now my problem (lol) – I’m using the newspaper effect more than once on the main page but I’ve noticed the info/data is exactly the same on each pop up. Have i done something wrong?
    I’m not a pro at jquery etc!! I just make websites as a hobby, so go easy on me please!
    Any help is appreciated 🙂

  24. i want use these window effects like popup when page load can any body how can it happen i had send my hole day for this.

  25. Please I need a nice opened window, but not open from button, but from text.
    maybe stupid question, but can you give me the real example of the same effect like your work, but NOT BUTTON, only click on text, no text change … only show some content in a new nice window. Thanks.

  26. How show modal block with help jquery? What function use for it?

    P.S.: for ex. we get result from $.post, if (data==’true’){showmodal();}
    what should been in function showmodal()?

  27. There may be a smarter way to do this, but I was having trouble getting the ModalEffects to be triggered by events originating from dynamically created controls so I modified modalEffects.js by adding “window.addEvent(‘domready’, function(){” above the first line of code in that file and “});” after the last line of code. That way the init function doesn’t run until all my dynamically created controls (which are created as the page is loading) are ready.