Yesterday @kriesi posted a nice codrops article about Modal Windows with CSS3 created by Manoela Ilic.
I was thinking, this is a nice idea, how about converting it to jQuery, make it a bit more abstract and adding callbacks.
Why with jQuery?
The standard version is great, but it stands for an example, motivation. My Idea was, to create something from this great article, that can be used right away.
The thing lacking from the original is the callback methods. It’s great for a static modal windows, but it’s hard to access the actually opened modal and it’s content for creating a little more exciting thing.
The structure
Please read the original codrops article to understand the idea behind this. What you will need is some kind of knowledge of css3 and jquery of course. The best way to understand this is to download the source code and study it for a couple of minutes.
Implementation
The downloadable version is well documented, but needs some further explanation. If you are familiar with jQuery, then this is going to be an easy ride for you.
First of all you need to load the neccessary scripts and styles in your header. I divided them into required and optional groups, since some of the assets are used only for better demonstration.
The required scripts/styles: (add them to the <head>)
<!-- Required scripts and styles --> <link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="js/jquery.modalEffects.js"></script> <!-- end of required scripts/styles -->
Without these the plugin will not work…
The optional scripts/styles:
<!-- Optional scripts/styles for better layout --> <script src="js/modernizr.custom.js"></script> <!-- classie.js by @desandro: https://github.com/desandro/classie --> <script src="js/classie.js"></script> <!-- for the blur effect --> <!-- by @derSchepp https://github.com/Schepp/CSS-Filters-Polyfill --> <script> // this is important for IEs var polyfilter_scriptpath = '/js/'; </script> <script src="js/cssParser.js"></script> <script src="js/css-filters-polyfill.js"></script> <!-- end of optional scripts/styles -->
Modernizr, classie, polyfiller, cssparser etc… Most of these are only for the better layout except for polyfill, which helps with the blur effect.
Standard modalEffects plugin declaration
<script> (function($){ $(document).ready(function() { $('.md-trigger').modalEffects({ overlaySelector: '.md-overlay', closeSelector: '.md-close', classAddAfterOpen: 'md-show', modalAttr: 'data-modal', perspectiveClass: 'md-perspective', perspectiveSetClass: 'md-setperspective', afterOpen: function(button, modal) { }, afterClose: function(button, modal) { } }); }); })(jQuery); </script>
This is a well known plugin loading structure. You can put this code in the header, footer or anywhere on the page, since it loads only after the document fires the “ready” event.
A quick explanation of the parameters:
- overlaySelector – the selector for the overlay element, which is loaded after clicking the trigger
- closeSelector – the button or element selector for the element which will trigger the “closing” of the modal window
- classAddAfterOpen – this class is added to the modal window when the open trigger is fired
- modalAttr – this is the attribute, which the trigger element must contain. It holds the ID of the modal window to show.
- perspectiveClass – if the document must get a perspective, this is added to it
- perspectiveSetClass – if the trigger element has this class, then the ‘perspectiveClass’ will be set to the document element
- afterOpen, afterClose – callback methods, with the actual button and the actual modal parameter.
The HTML structure was not changed at all. I only added a few lines to the css files, but nothing has been changed.
I hope, that some of you may find this useful!
Comments 61
Thanks for this JQuery Plugin. Works great.
However I need help to customize it.
I generate on the fly with ajax a line with buttons having the md-trigger class :
Fade in & Scale
Slide in (right)
Slide in (bottom)
The problem is that the click event is not binded anymore to my buttons, even I saw you use the on method in =side your plugin.
Do you have an Idea ?
Thanks a lot.
Fred
Author
Hi!
The reason the event handlers are detached, because the on() method is not used on any element, but the modal trigger element itself. In other words, it needs a modification:
Old way
$(close).on( ‘click’, function( ev ) { ….
New way
$(‘body’).on( ‘click’, close, function( ev ) { ….
This way, the click event gets bind to the “body” and every new close element is bind as well. Of course this needs to be done with all the on() events.
I haven’t tested this code, but it should work.
Thank you for your answer, but I really don’t understand what I have to do.
Do I have to change those lines inside the JQuery plugins :
$(overlay).on(‘click’, function () by
$(‘body’).on(‘click’, overlay, function ()
$(close).on( ‘click’, function( ev ) by
$(‘body’).on( ‘click’, close, function( ev )
I don’t think so because it do not work at all.
Could explain it differently ?
Thanks again.
Fred
Hi, will the jquery version work with IE 8/9?
Author
Hi!
Unfortunately not, it still uses css3 transitions, jQuery is only an addition.
I think there is no solution out there to implement this on older ie versions. (and I think there wont be)
Hi… Really a great effect model…
i can’t understand how to code this while onload the web page.
i am using this code for an onload the site, but it won’t work, i have no idea to incorporate the body element..
(function($){
$(document).ready(function() {
$(‘.md-trigger’).modalEffects({
overlaySelector: ‘.md-overlay’,
closeSelector: ‘.md-close’,
classAddAfterOpen: ‘md-show’,
modalAttr: ‘data-modal’,
perspectiveClass: ‘md-perspective’,
perspectiveSetClass: ‘md-setperspective’,
afterOpen: function(button, modal) {
},
afterClose: function(button, modal) {
}
});
});
})(jQuery);
Hi, does this allow for multiple instances on one page?
Please help me
afterOpen: function(button, modal) {
// what here define data-modal value?
}
Very thank you
Jirka
Great plugin but can someone tell me how to make a modal popup window appear automatically when a page loads?
Hi richardhorne,
To make the modal appear on page load, simply add the class ‘md-show’ to your modal.
In jQuery this would look like this: $(‘.md-modal’).addClass(‘md-show’);
Adding “md-show” class to my modal does indeed open it but it also breaks all the close buttons on the open modal they no longer work, these only seem to work if the modal was opened via a button.
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | ThemeFuture.com
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | YThemes
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Digital ProductDigital Product
Pingback: Flat Dream - Responsive Admin Template (Admin Templates) | CiusanCiusan
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | CMSTemplates
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Themes and More
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Themes
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | TokoTheme.com – Premium Themes
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | ThemeFactory
Pingback: Flat Dream - Responsive Admin Template (Admin Templates)
Pingback: Flat Dream – Responsive Admin Template (Admin Templates)
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | ThemeFox
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Premium Theme
Pingback: Flat Dream — Responsive Admin Template (Admin Templates) | DevFish [.name]
Pingback: Flat Dream - Responsive Admin Template (Admin Templates) [ Admin Templates ] - ThemeFor.net
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | 意高设计工作室
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | 11 Downloads
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Business Seo Blog
Pingback: Flat Dream – Responsive Admin Template - Nulled Themes 4 Me
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) : Free PHP Scripts, WordPress Plugins, HTML5, jQuery, and CSS | Instantcloud.tk
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | GrabTemplates
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Design och layout
Pingback: Download ThemeForest - Flat Dream - Responsive Admin Template | Seo Tools Download
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Web Templates Database
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | THEMEZ.PRO
Pingback: Flat Dream - Responsive Admin Template (Admin Templates)Web Procyon
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | The Talks
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | SellOffDesigns
Pingback: Flat Dream - Responsive Admin Template (Admin Templates) - Freelancer webdesigners.com
Pingback: Free preview of Flat Dream – Responsive Admin Template (Admin Templates) | Digital Goods
Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Designers And Developers
great plugin, but I see something that break my mind, if you open de modal putting
addClass(“md-show”)
the plugin doesn’t load afterOpen, afterClose and don’t work the close buttons
Its terrible, but to work with afterClose and afterOpen and triggering from a event I need to do something like that:
<input type=”button” id=”btnOk” class=”hidden md-trigger” data-modal=”modal-sucesso” />
and on event call $(“#btnOk”).click();
Disgusting but it’s the only way I found.
Instead of md-show can I do something with this:
I want to open ex. modal-4 after 3 seconds after page-load
Author
Hi!
Why don’t you trigger a click on the triggerer class?
How does it target “modal-4”
hi there,
can i call modal from an iframe?
Author
I think so. But I guess it will only work inside of the iframe borders.
Thank u for your very quick reply,
can you give me an example for modal-12?
That’s very fancy. I can imagine this would be ideal for an email form Call To Action. Thanks!
Anyone know how to stop playing video from YouTube IFRAME, when modal window close?
I can stop it only if reload the page
function removeModal( hasPerspective ) {
document.location.reload();
classie.remove( modal, ‘md-show’ );
if( hasPerspective ) {
classie.remove( document.documentElement, ‘md-perspective’ );
}
}
Hello,
How do I add a modal login to my wordpress website? I need the modal login to work for whmcs. Could you please help me ?
thanks for Nifty Modal.
i have a problem.
I have 2 modal (login, register).
Login-modal can close by click .md-close
But Reg-modal can’t close by click .md-close
You have solution for my problem.
I may have missed this in the comments when reading through them, but how do I trigger a modal to appear on an event.
For example if an if statement is false – rather than a press of a button??
The Nifty Modal Window is not working in Safari. How to fix this bug?
Author
In case you are refering to Safari in windows, then it’s because windows Safari is no longer maintained and updated. The last release is from over 2 years.
Does it work in the newer versions of safari on the Mac?
Author
Yes it does.
i want to use this in window.load(function(){
)};
how can i use this
can you please explain for me…………….
This works great for me. How can I set position of model popup near my link which i clicked instead of center of page? I see below in component.css currently.
.md-modal {
position: relative;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;