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. In this website, I'm using facebox (inspiration from facebook). Others, such as lightbox, thickbox, multibox, litebox...... it's too many of them and they all are having different features. 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.

y y

A mask that will fill the whole screen. Modal windows that is simple and easy to modify.

Advertisement

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 /* Z-index of #mask must lower than #boxes .window */ 3 #mask { 4 position:absolute; 5 z-index:9000; 6 background-color:#000; 7 display:none; 8 } 9 10 #boxes .window { 11 position:absolute; 12 width:440px; 13 height:200px; 14 display:none; 15 16 z-index:9999; 17 padding:20px; 18 } 19 20 21/* Customize your modal window here, you can add background image too */ 22 #boxes #dialog { 23 width:375px; 24 height:203px; 25 } 26

<style>

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

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

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

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

Launch Modal Window with Javascript

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

1$(document).keyup(function(e) { 2 if(e.keyCode == 13) { 3 $('#mask').hide(); 4 $('.window').hide(); 5 } 6

});
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. For those who's looking for a fully customizable Modal Window, you can try my method, if you have any other questions, please let me know. Thanks for reading.

Update
22-5-2009: - Added a new section "Activate modal window with Javascript" 16-4-2009: - If you prefer this article in Portuguese, please visit Simple jQuery Modal Window in Portuguese by Maujor 27 Mar 09: - Added e.preventDefault() to link to launch the modal window. - Changed css position to fixed, so that the modal window also fixed to center. - Changed var winH = $(window).height(); to var winH = $(window).height(); 24 Mar 09: - Added e.preventDefault() to cancel the anchor link effect, we can also able to cancel it by removing the href attribute. - Changed var winH = $(window).height(); to var winH = $(document).height();

This is how it looks like in IE:

1. HTML
This is the html, basically #dialog-overlay is the dark background and #dialog-box is the message box. It's pretty straight forward and I reckon you can use javascript to append this into BODY as well. 1 2 3 4 5 6 7

<div id="dialog-overlay"></div> <div id="dialog-box"> <div class="dialog-content"> <div id="dialog-message"></div> <a href="#" class="button">Close</a> </div> </div>

2. CSS
This is the first time I use CSS3. CSS3 is a hot topic lately because safari, chrome, firefox and IE8 start supporting it. Some of the websites like twitter has been using CSS3 as well. The following is the CSS code and I have added comments in each of the section.

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 52 53 54 55 56 57 58 59

#dialog-overlay { /* set it to fill the whil screen */ width:100%; height:100%; /* transparency for different browsers */ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; background:#000; /* make sure it appear behind the dialog box but above everything else */ position:absolute; top:0; left:0; z-index:3000; /* hide it by default */ display:none; }

#dialog-box { /* css3 drop shadow */ -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* css3 border radius */ -moz-border-radius: 5px; -webkit-border-radius: 5px; background:#eee; /* styling of the dialog box, i have a fixed dimension for this demo */ width:328px; /* make sure it has the highest z-index */ position:absolute; z-index:5000; /* hide it by default */ display:none; } #dialog-box .dialog-content { /* style the content */ text-align:left; padding:10px; margin:13px; color:#666; font-family:arial; font-size:11px; }

60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101

a.button { /* styles for button */ margin:10px auto 0 auto; text-align:center; display: block; width:50px; padding: 5px 10px 6px; color: #fff; text-decoration: none; font-weight: bold; line-height: 1; /* button color */ background-color: #e33100; /* css3 implementation :) */ /* rounded corner */ -moz-border-radius: 5px; -webkit-border-radius: 5px; /* drop shadow */ -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); /* text shaow */ text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; } a.button:hover { background-color: #c33100; } /* extra styling */ #dialog-box .dialog-content p { font-weight:700; margin:0; } #dialog-box .dialog-content ul { margin:10px 0 10px 20px; padding:0; height:50px; }

3. Javascript
Alright, I reference part of the javascript from jQuery modal window tutorial. I write a popup function for this dialog box so that it can be called easily.

$(document).ready(function () {
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

// if user clicked on button, the overlay layer or the dialogbox, close the dialog $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () { $('#dialog-overlay, #dialog-box').hide(); return false; }); // if user resize the window, call the same function again // to make sure the overlay fills the screen and dialogbox aligned to center $(window).resize(function () { //only do it if the dialog box is not hidden if (!$('#dialog-box').is(':hidden')) popup(); });

}); //Popup dialog function popup(message) { // get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); // calculate the values for center alignment var dialogTop = (maskHeight/3) - ($('#dialog-box').height()); var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); // assign values to the overlay and dialog box $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show(); $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show(); // display the message $('#dialog-message').html(message); }

1.

<script type="text/javascript"> $(function() { $('#dialog').dialog({ autoOpen: false, }); $('#opener').click(function() { $('#dialog').dialog('open'); return false; }); }); </script>

2. 3. 4.

5. 6. 7. 8.

<div id="dialog" title="Seite bearbeiten"> <form action="" method="post"> <input type="text" name="name" value="" /><br /><br /> <input type="apilink" value="" size="35" /><br /><br /> <input type="submit" name="editieren" value="Absenden" /> </form> </div> <a id="opener" href="#">Dialog</a>