From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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).
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%;
}
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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!
The tutorial is great. For those having the issue of blurry contents in WebKit browsers, it’s a common problem since it’s a WebKit bug. Here’s a Stack Overflow question that you might find interesting: http://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d
I believe there’s no fix. If there is, please visit my site and send me a message letting me know!
ML thanks for the tutorial. Really nice!
There is a solution, but it will only work in very modern browsers that support “flexbox”. I’ve written a Backbone.js version of Modal that utilizes flexbox. (It can also be used without). Check it out: http://kjantzer.github.io/backbonejs-modal-view/
This is great, is there a way to have it not bump the page to the top when you open a window? It’s a bit jarring to have it pop up quickly before the modal opens.
hi, thanks for your great tutorial. But i have a problem with the modal. My modal always forcing to close a second after its loaded. How can i fix this?
all you need to do to get it to show up on load is change the HTML
div class=”md-modal md-effect-x” id=”modal-x”
to
div class=”md-modal md-effect-x md-show” id=”modal-x”
then it will show when the page is loaded.
this might not show the full on load effect for every one.. but its the most simply way to do it.
Thanks.
Right to the point
Question about blur effect.
What prevents the edges of the container to feather when blurred? Tried to achieve the same crispness, but failed…
This page (so the script) does not work at all on the following combination (Windows + Safari), can anybody help about that? Thank you so much
Hi, can someone help me how to add this great effect to joomla website?
I tried to add css code from this exemple to template.css file, add javascript files to js folder in cpanel, and than I make new custom html module and copy html code from this example to it and I have nothing but a button on the page.
Thanks for amazing work ! I have a simple question. I want to use youtube video in modal window. It worked but when i close the modal window, the video still playing in background. Can we fix this ? Thanks in advance
I too am trying to put video content (not YouTube) into the modal window and unless the viewer clicks the pause button prior to closing the modal, the video continues to play.
Hi how can replace button with image?? I’d like to use first effect in my project but on small image ?? Thank you
You can just wrap your image tag in the button tag.
Hello thanx for awesome plugin,
But i need to disable scroll when modal is open rather than overflow hidden its make my browser jump
please do reply thanx in advance
@sumit I’m looking for same function. Do you find any solution?
Hi. I need a help.
How to hide the body scroll bar when showing modal dialog (in “just me” modal window)?
Did you find a solution to that? I’m in the same situation as you.
Great post! However I have got one little itch with using this as a snippet ‘cos take of instance a visitor filling an important form mistakenly clicks on the overlay element hence closing the form and erasing the form content…
Is there any fix to actually leave the closing of the modal window itself to just the close button on the modal window. Would really appreciate a quick response on this.
Great post once more!
Hi
How can i use this on WordPress ?
I am displaying all my posts in 3 column, with title and button.
But when i click the button it shows same content on all posts button.
Help Please.
Thanks
Rajiv
I tried changing the data-modal to post id , but it didnt work.
How can i show content in pop up from its selected post
Thanks for the great article! I’m hitting one obstacle though; with the method you are using to center the modal element:
“transform: translateX(-50%) translateY(-50%);”
The text in the element can be blurry depending on the size of the window, I’m guessing because of sub-pixel alignment. Is there a good alternative to centering that element and keeping things pixel aligned?
Well, there is!
The solution is called calc, a lovely css function that now is well implemented in most browsers.
in fact, I really love calc !!!
I tried this and it works fine in one of my projects:
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
width: 450px;
height: 400px;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
/*-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);*/
.calc(‘top’, ~”50% – 200px”);
.calc(‘left’, ~”50% – 225px”);
}
well, I have to say that I don’t need ‘advanced’ modal features, I just use md-effect-1, so I commented the transform command with no problem…
Is there a way to call this function from within php?
I have a website that I would like a Modal Window to pop up with the errors on the login and registration forms. So I have a method that outputs the errors into a list inside of the Modal window (the model window content is ‘echo’ed out) but then the only way to call it is from a button I have to put there saying “show errors” is there a way that it can pop up when it is created?
Thanks so much, your work is amazing!!
Josh
This modal is great but there seems to be many issues as ive read the comments.
I think i’ll look for another modal box until these issues and this plugin becomes stable.
Hi,
Thank you for the amazing plugin.
I’ve used the ‘super scaled’ effect . It seem to be working fine in Firefox, and Chrome but not working in Safari Browser.
I know there is a compatibility issue with Safari Browser, but the modal is also not working.
Is there any way to make it work in Safari?
Joseph Justin
Waouuuh!!! Thanks a lot for this!
One question: how can i trigger the modal on the body onload please?
I’m trying to execute/mimic what happens when the class of an object set to “md-close” is clicked, but from a javascript function. so essentially:
in javascript:
function click(ModalId) { //close model with id 'ModalId' }and then in the HTML:
<div class="md-modal md-effect-10" id="modalSearch"> <a href="#" onClick="click('modalSearch');">Close me!</a>how would i go about doing this?
Hi,
How could a click in the modal window closes the modal? What should I add to the code? (I tried to add the md-close class to the modal windows but it doesn’t work.)
Can someone please help me?? Getting multiple close buttons on a modal should not be this hard. Thanks in advance.
Is there a method to open a NEW modal from an existing modal.
Example: On the Modal which opens from a link, I have for example:
<button class="md-close">Close me!</button> <a href="#modal-3" class="md-trigger md-setperspective" data-modal="modal-3">register</a>But the new Modal ( modal-3 ) for example, opens in front of the first modal. I was just wondering if on click of the a href link above, I could get it to close the first modal, and animate and display the second modal.
Ste
just remove the “md-show” class of the modal that is already displaying
i trigger it with other button that open another modal and the onclick method on that button
<button class="pure-button md-trigger" data-modal="modal-recovery" onclick="$('#modal-login').removeClass('md-show');">Close And Open Other</button>This is great but if I have multiple modals? How can I remove md-show class from the actual modal window displayed as I don’t know which modal is open?
How do I make it so that the modal popup remains in the center of the screen as I scroll up or down the page? I tried position:fixed but that isn’t working
Hey there,
really a great script. Thanks for that. But i have a question.
Is there a way to automatically open the window when the page is loaded ?
I want to give the visitors some informations on there first visit.
Would be great if someone could help me.
Thanks – and merry christmas :-).
Muito bom 😀
this is a great modal, thanks for making it!
one question: where do i customize the JS with window.pageYOffset in order to make sure the modal pops up in the middle of the screen regardless of if the user has scrolled or not? right now if i scroll down and press a button to open the modal it pops up outside of the viewport
don’t work with grid-layout. I do not know what to do. without grid-layout everything works fine.structure breaks down after
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!
Newspaper
Newspaper
Hello, i am trying to figure out how to call function md-trigger with
so when user clicks link it opens modal-16 window
is there a way?
Good afternoon, someone could make me doubt, I have a form and this form has some functions in php, I would put this kind of warning to the user, how can I trigger these functions through a form? I appreciate the help.
Hello,
I have one modal-16 a href link in header menu
a href=”#modal-16″ class=”md-trigger2 md-setperspective” data-modal=”modal-16″> PC /a
and in footer menu
a href=”#modal-16″ class=”md-trigger1 md-setperspective” data-modal=”modal-16″> PC /a
( i have called md-trigger1 and md-trigger2 , opened javascript and renamed function…
and my problem is can i have just one javascript ? i have two js files… md-trigger1 md-trigger2
and second question is do i have to put this CODE
->>
// this is important for IEs
var polyfilter_scriptpath = ‘/js/’;
<– in both places?? because it only works when i put them behind a href link #modal-16…
//
//
//
//
//
//
//
// // this is important for IEs
// var polyfilter_scriptpath = ‘/js/’;
//
//
//
every time i have a href link i have this in next line, or else. code does not work. where to put this just to use it one time?
header.php, content.php , footer.php
Just put var polyfilter_scriptpath = ‘plugins/ModalWindow/js/’; in a javascript tag inside under the js scripts.
People seriously need learn decent english grammar before they ask long questions…
This is what exactly I was looking for.. Thanks a lot..
Using map things I write in place of xxxxx?
thanks oda
…
Very beautiful modals windows! Thank u!
How I can call modal window without button? I want show modal after ajax answer! Thnx
Hi I’D like to know if there is a way to make the content of the modal window scrollable ? I tried adding overflow auto to many css classes (md-content, md-modal, etc) and it doesn’t work 🙁
Thanks !
The same issue here but please, have a look to older comments. Your answer was already made!
Hi.
I’m also having a bit of trouble with scrollable content. If I put overflow-y:auto or scroll in the .modal class, the content gets scrollable. But the scrollbar is visible in my page even when the modal is closed. I would also like that only the content is scrollable, and the modal header sticks.
Hope someone can help. Thanks!
Update: The scrollbar is visible in Chrome only. In IE the scroll doesn’t appear at all, and in Firefox it actually works.
Am having this problem as well
Any help?
http://stackoverflow.com/q/21972166/2449784
Thx!
My question was deleted earlier. I would like to try it again. I would like to put a text input into this modal. On opening I want to have an autofocus on that field. HTML5 autofoucs and jQuery .focus() doesn’t seem to work.
Can somebody please help. It would be much appreciated.
Thank you
Genial trabajo!!!
Verry beautiffulllllllllllllllllllllllllllllllllll
How does validation work with this? I want it to work where the modal only comes up if an email is in a field.
Hello,
is it possible to put a focus on a text input inside this modal?
Hi, great tutorial. I am planning to use one of the effects for a mobile app using PhoneGap. It seems however that the effects do not work on android browsers apart from the Google Chrome browser. Has anyone come accross this and does anyone have a fix?
Thanks
Hey great job Mary Lou i love this and have implemented this into a site. But the problem is if you’re not on the homepage it redirects to the homepage before it will open. Any idea how to fix this?
I want to use this, but want to load in the model, fields to edit that come from a database. I don’t suppose it matters, but I am using terascript as the middleware between the web page and the database. So do I need to use an ajax function in order to do this?
This effect’s are awsome.
Thanks MARY LOU.
i will use it on my landing page 🙂
Anybody has a fix for the blur text on Chrome browser?
Yep, there are two ways to get around it.
One is make sure your modal width is even such as 300px and not 299px. I’ve think the fuzzy happens because of the translation to 50% which divides the uneven pixel in half.
The more elegant way is to use CSS3 “flexbox”, but this will only work in new browsers (http://caniuse.com/#search=flexbox)
I’ve written a backbone.js version of Modal utilizing flexbox here: http://kjantzer.github.io/backbonejs-modal-view/
You just made my day 🙂
Can you use this or other pop-up modal windows without JavaScript, just HTML5 and CSS3 ?
Im doing a school project and need a disclaimer on every page, but instead of showing the disclaimer and disrupting the design a want to put a disclaimer link in the footer that triggers a modal window with the required disclaimer when triggered.
NOT ALLOWED TO USE JavaScript.
Thanks, 🙂
Nope. To bind something to a click event you’ve gotta use javascript. You can do it with very little javascript, and/or an inline `onclick=””` js call but this is not really good practice and not advised.
Awesome Effects … I like it very much … Will try to implement in my site.