Nifty Modal Window Effects with CSS3 and jQuery

Ernest Marcinko Blog, jQuery, Tutorials 53 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?3b42de"></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

Ernest Marcinko

WordPress developer, javascript enthusiast, photoshop clicker and the founder of wp-dreams.com

Latest posts by Ernest Marcinko (see all)

Stay connected

Related Posts
Filter by
Post Page
Tutorials jQuery Blog Reviews Commercial Plugins Wordpress Wordpress Free Plugins css plugin ajax update box ajax search search
Sort by

Item Transition Inspiration with jQuery

2014-03-21 19:26:44
admin

18

jQuery element rotation plugin

In my previous project I needed to rotate some elements, but I hadn't found any jQuery plugins regarding this issue.
2012-10-16 18:50:00
admin

18

Related Posts Pro for WordPress

2014-07-04 14:07:19
admin

8

Using Ajax in your WordPress plugins

2014-04-14 13:23:29
admin

8

Maximum performance with WordPress

2014-03-24 18:26:32
admin

8

WordPress - Widget select box

2014-03-18 09:40:58
admin

8

Contact form 7 Gmail spam fix

2014-03-17 16:25:25
admin

8

Ajax Search Pro for WordPress

2012-11-06 19:27:10
admin

8

Polaroid Slider for WordPress

2012-10-09 18:26:50
admin

8

Like this plugin?

2014-07-01 00:00:00
anago

999

Comments 53

  1. 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. Post
      Author
      admin

      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

        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

    1. Post
      Author
      admin

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  33. 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

  34. 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.

  35. 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. 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. Post
      Author
  36. 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’ );
                    }
                }

  37. 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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *


6 − 4 =