Simple jQuery Modal Window Tutorial

Introduction

In this tutorial, I'm going to share how to create a simple modal window with jQuery. I like jQuery, it makes everything so simple and so easy. In case you don't know what's modal window. You can click here. That's an example of a modal window.

Right, let's start, this example will show you how to create a modal window that will display the content of a DIV #ID.

My objectives are:

• Able to search the whole html document for A tag NAME="modal" attribute, so when users click on it, it will display the content of DIV #ID in the HREF attribute in Modal Window.
• A mask that will fill the whole screen.
• Modal windows that is simple and easy to modify.

1. HTML code and A tag attributes

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<!-- #dialog is the id of a DIV defined in the code below --> <a href="#dialog" name="modal">Simple Modal Window</a> <div id="boxes">           <!-- #customize your modal window here -->     <div id="dialog" class="window">         <b>Testing of Modal Window</b> |                   <!-- close button is defined as close class -->         <a href="#" class="close">Close it</a>     </div>           <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->      <div id="mask"></div> </div>

2. CSS code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<style> /* Z-index of #mask must lower than #boxes .window */ #mask {   position:absolute;   z-index:9000;   background-color:#000;   display:none; }     #boxes .window {   position:fixed;   width:440px;   height:200px;   display:none;   z-index:9999;   padding:20px; } /* Customize your modal window here, you can add background image too */ #boxes #dialog {   width:375px;   height:203px; } </style>

3. Javascript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

<script> $(document).ready(function() {      //select all the a tag with name equal to modal     $('a[name=modal]').click(function(e) {         //Cancel the link behavior         e.preventDefault();         //Get the A tag         var id = $(this).attr('href');               //Get the screen height and width         var maskHeight = $(document).height();         var maskWidth = $(window).width();               //Set height and width to mask to fill up the whole screen         $('#mask').css({'width':maskWidth,'height':maskHeight});                   //transition effect             $('#mask').fadeIn(1000);            $('#mask').fadeTo("slow",0.8);                //Get the window height and width         var winH = $(window).height();         var winW = $(window).width();                         //Set the popup window to center         $(id).css('top',  winH/2-$(id).height()/2);         $(id).css('left', winW/2-$(id).width()/2);               //transition effect         $(id).fadeIn(2000);           });           //if close button is clicked     $('.window .close').click(function (e) {         //Cancel the link behavior         e.preventDefault();         $('#mask, .window').hide();     });               //if mask is clicked     $('#mask').click(function () {         $(this).hide();         $('.window').hide();     });               }); </script>

It's very straight forward and easy to understand. Remember, you need to include jQuery framework.

4. Launch modal window with Javascript

Due to popular demand :), I have an example for it. The concept is simple. I wrapped the modal window script inside a function, and then you will able to call the modal window using javascript function call.

Yes, you will able to load the modal window on page load as well :)

1 2 3 4

$(document).ready(function () {   //id is the ID for the DIV you want to display it as modal window   launchWindow(id); });

And, if you want to close the modal window on key press, any keys you want, you can add the following function.

1 2 3 4 5 6

$(document).keyup(function(e) {   if(e.keyCode == 13) {     $('#mask').hide();     $('.window').hide();   } });

Use Cookie on First Load

Another popular demand from readers and this is how you do it. You need two functions (createCookie and readCookie) from this post about web cookies

1 2 3 4 5 6 7 8 9 10

$(document).ready(function() { //if the cookie hasLaunch is not set, then show the modal window if (!readCookie('hasLaunch')) {     //launch it     launchWindow('#dialog1');           //then set the cookie, so next time the modal won't be displaying again.     createCookie('hasLaunch', 1, 365); } });

Recalculate the Position of Modal window and mask on window resize

Don't know how I missed it, this is the code that reposition the modal window and recalculate the dimension of mask if user resized the windows.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

$(document).ready(function () { $(window).resize(function () {            var box = $('#boxes .window');            //Get the screen height and width         var maskHeight = $(document).height();         var maskWidth = $(window).width();                 //Set height and width to mask to fill up the whole screen         $('#mask').css({'width':maskWidth,'height':maskHeight});                          //Get the window height and width         var winH = $(window).height();         var winW = $(window).width();            //Set the popup window to center         box.css('top',  winH/2 - box.height()/2);         box.css('left', winW/2 - box.width()/2);    }); });

I think I should make another post about modal window. :)

5. Conclusion

Yes, that's all you need to make a simple jquery modal window. In this tutorial, it shown you the concept of how to display DIV content inside a modal window. However, you can further develop it to accept a link and display it in an iFrame and image gallery.

*(Reference : queness)