Tutorials

Simple jQuery Modal Window Tutorial

Written by Kevin Liew on 17 Mar 2009
455,630 Views • Shares
797 comments

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.

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

<!-- #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

<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

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

Demonstration Download

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

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

Demonstration

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

$(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

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

});

Demonstration

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.

$(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.

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

29-2-2012: - Fixed auto resize, change modal window's position from absolute to fixed.

 

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

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

797 comments
Yaseen 4 years ago
Hi there,

I am struggling to have multiple simple modal windows on my page. I tried to replicate it on the download file, but no luck.

Kind Regards,

Yaseen
Reply
Felix 4 years ago
How do I make the boxe (s) uncloseable or prevent it from being closed every time you click outside the box?

I'd really appreciate an answer.
Reply
Kevin Liew Admin 4 years ago
Remove this at line 43:

//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
Reply
Saurabh Garg 4 years ago
Sorry i am not understanding the 4th point can you tell me in detail
Reply
Tim 4 years ago
If you resize the window width to a smaller size and scroll right, that area isnt shaded. Changing the

#mask{
position:absolute; ...

to

#mask{
position:fixed; ...

fixed that for me. Thanks for the post Kevin, you saved me a lotta work.
Reply
Max Steinweber 4 years ago

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


replace the .hide() with a .fadeOut() for better effect.

//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').fadeOut(500);
});

//if mask is clicked
$('#mask').click(function () {
$(this).fadeOut(500);
$('.window').fadeOut(500);
});
Reply
Alberto Navarro 4 years ago
Excellent post, simple completely understandable!!!!
Reply
Tan Wiguna 4 years ago
Thanks, excellent post :)
Greeting from Indonesia
Reply
Revathi 4 years ago
Nice post. But I need close button for dialog box. If I am using this code with other jQuery validations text box validations are not working and throwing an error. How to fix this issue..............?

Thanks :)
Reply
Howman 3 years ago
I have been looking for a good popup script found lots of them but yours has been the only one I could get working really simple to use.

I thank you for that .

Now is there a way that ajax could be used to bring another page or html into the popup box
if there is how would i do this?
Reply
Nagy Anna 3 years ago
Thank you for this tutorial! It is very useful for me. :)
Reply
ashyda 3 years ago
Thanks, it works perfectly. :) (And I have no idea about jquery!)
Just one hint if anyone has the same problem: if the mask doesn't appear over the content but underneath, add "top: 0; left: 0;" to your css. It should work now.
Reply
brokenyolk 3 years ago
hi.

thanks for scripts. works great. very easy to implement compared to some of the others that i have been looking at

a couple of things

1. i believe that your script in auto-launch.html has an incorrect call to close the window.

//if close button is clicked
$('.window #close').click(function () {
$('#mask').hide();
$('.window').hide();
});

however the close link is specified as a class="close" not id="close"

<div id="dialog" class="window">
Simple Modal Window |
<a href="#"class="close"/>Close it</a>
</div>

also, i am having with using the cookie to disable the modal from launching per your instructions, maybe you can tell me where i am going wrong as i can't the modal to launch when using the code:

Original:
$(document).ready(function() {

//Put in the DIV id you want to display
launchWindow('#dialog');

//if close button is clicked
$('.window #close').click(function () {
$('#mask').hide();
$('.window').hide();
});

//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});

Replacing with:

$(document).ready(function() {

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

});

//if close button is clicked
$('.window #close').click(function () {
$('#mask').hide();
$('.window').hide();
});

//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});

thanks for the help.

Reply
Moriz 3 years ago
Excellent script. Thank you very much!
You might consider adding
#mask {
top: 0;
left: 0;
}
to the current properties in order to ensure proper positioning in mask if it's placed inside another container other than the body tag.
Reply
Khoa Tran Minh 1 year ago
I also think as you. I add two properties for #mask selector. Thanks author for great post.
Reply