Nifty Modal Window Effects with CSS3 and jQuery

Ernest Marcinko Blog, jQuery, Tutorials 61 Comments

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.

modal

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!

DemoDownload

Comments 61

  1. fcooker
    fcooker

    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

    1. Ernest Marcinko Post
      Author
      Ernest Marcinko

      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.

      1. fcooker
        fcooker

        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

  2. Jo Phillips
    1. Ernest Marcinko Post
      Author
      Ernest Marcinko

      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)

      1. anbu

        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);

  3. Will Thresher
  4. Nothing007
  5. Richard Horne
    1. joshatdf
      joshatdf

      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’);

      1. Sam

        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.

  6. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | ThemeFuture.com

  7. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | YThemes

  8. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Digital ProductDigital Product

  9. Pingback: Flat Dream - Responsive Admin Template (Admin Templates) | CiusanCiusan

  10. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | CMSTemplates

  11. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Themes and More

  12. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Themes

  13. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | TokoTheme.com – Premium Themes

  14. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | ThemeFactory

  15. Pingback: Flat Dream - Responsive Admin Template (Admin Templates)

  16. Pingback: Flat Dream – Responsive Admin Template (Admin Templates)

  17. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | ThemeFox

  18. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Premium Theme

  19. Pingback: Flat Dream — Responsive Admin Template (Admin Templates) | DevFish [.name]

  20. Pingback: Flat Dream - Responsive Admin Template (Admin Templates) [ Admin Templates ] - ThemeFor.net

  21. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | 意高设计工作室

  22. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | 11 Downloads

  23. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Business Seo Blog

  24. Pingback: Flat Dream – Responsive Admin Template - Nulled Themes 4 Me

  25. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) : Free PHP Scripts, WordPress Plugins, HTML5, jQuery, and CSS | Instantcloud.tk

  26. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | GrabTemplates

  27. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Design och layout

  28. Pingback: Download ThemeForest - Flat Dream - Responsive Admin Template | Seo Tools Download

  29. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Web Templates Database

  30. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | THEMEZ.PRO

  31. Pingback: Flat Dream - Responsive Admin Template (Admin Templates)Web Procyon

  32. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | The Talks

  33. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | SellOffDesigns

  34. Pingback: Flat Dream - Responsive Admin Template (Admin Templates) - Freelancer webdesigners.com

  35. Pingback: Free preview of Flat Dream – Responsive Admin Template (Admin Templates) | Digital Goods

  36. Pingback: Flat Dream – Responsive Admin Template (Admin Templates) | Designers And Developers

  37. Hector Louder
    Hector Louder

    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

  38. Wagner

    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.

  39. Niklas

    Instead of md-show can I do something with this:

    I want to open ex. modal-4 after 3 seconds after page-load

     

    $(document).ready(function() {
        setTimeout(function() {
          $('#myModal').fadeIn(200);
        }, 30000); // milliseconds
    });
    1. Ernest Marcinko Post
      Author
      Ernest Marcinko

      Hi!

      Why don’t you trigger a click on the triggerer class?

      $(document).ready(function() {
          setTimeout(function() {
            $('.md-trigger').get(0).click();
          }, 3000); // milliseconds
      });
    1. Ernest Marcinko Post
      Author
  40. Dmitriy

    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’ );
                    }
                }

  41. Phuc

    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.

  42. Jeff

    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??

    1. Ernest Marcinko Post
      Author
        1. Ernest Marcinko Post
          Author
  43. Vaibhav

    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;

Leave a Reply to Vaibhav Cancel reply

Your email address will not be published.