Register now or login here to start promoting your blog and your favourite articles.
Simple jQuery Modal Window Tutorial
17 Mar 2009 - 199 Comments
In this tutorial, I'm going to share how to create a simple modal window with jQuery. It selects all the anchor tags with name attribute set to "modal" and grab the DIV #id defined in the href and displays it as a modal window. jQuery has made everything so simple, be sure to check out the demonstrations, examples I made. It looks good :)
Author: kevin | Source: queness
Demonstration Download

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.

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

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.
$(document).keyup(function(e) {
  if(e.keyCode == 13) {
    $('#mask').hide();
    $('.window').hide();
  }
});
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();

Copyright & Usage

The effects and techniques demonstrated in tutorials on Queness can be used in whatever manner you wish without attribution. You cannot copy whole tutorials (unless permission is given), either in English or translated to another language.

Share This Post to Support Me! :)


Comments

Bhargavi on 30 Aug 2010 says:
This Turorial is Gud i worked This Tutorial but i got problem in dropdown list. I in my page one dropdownlist is there it cann't be masked how can u solve the problem?
Andy on 25 Aug 2010 says:
Hi, my webpage is under construction. I want people who load my website want to see a modal window saying "Webpage is under Construction" as soon as they launch the page.
I am very new and dont know any thing about java script...
Can you please tell me how to do this ?
Rudresh on 24 Aug 2010 says:
Its really a useful and nice tutorials on modal box pop up.
Thanks . :)
Shawn Hill on 19 Aug 2010 says:
If you want to center the modal on a long screen after someone has scrolled down. You need to change the code to this:

$(id).css('top', (winH/2-$(id).height()) + $(window).scrollTop());

$(id).css('left', (winW/2-$(id).width()/2) + $(window).scrollLeft());

Make sure you have at least jquery 1.26
Ovidiu on 11 Aug 2010 says:
It works! :)
Thanks
Randall W. on 3 Aug 2010 says:
First off, thanks for the tutorial, the modal windows look excellent. I have a question regarding scrolling through the modal windows, however. As you've explained in these comments, I've created different divs to create different modal windows. If I wanted to "scroll" through each modal window and go from window to window without having to exit from each modal window (that's a lot of windows), how would I do that?
ravi on 21 Jul 2010 says:
@ricky

i tried adding this

$(id).css('top', "25%" );

to the jQuery code and i think it fixes the problems for long pages if you have the #ed the anchor tag.
Samundra Shrestha on 17 Jul 2010 says:
@Ricky To make dialog box appear at the middle you will have to manually edit the jQuery code given in this tutorial, so that each time you scroll through the long page, the dialog box is fixed at the position.
Ricky on 13 Jul 2010 says:
I still cannot get this thing to appear in the middle of the screen on a long page.

It always appears at the top.

Any ideas?
Samundra Shrestha on 13 Jul 2010 says:
Well a css fixed my problem.

For others who might be having the same problem as mine. Here is the solution.

add css styles

#mask {
top:0;
left:0;
/**actual css definistion **/

}
#boxes .window {
top:0;
left:0;
/**other css definitions**/
}

This would layout the mask and window to the top left corner and then it will cover the whole screen.


Leave a comment

Subscribe RSS Subscribe RSS, Keep yourself updated with queness latest posts!
Pixel Crayons

Buy wholesale computers directly from China at DHgate.com

Discover the tools to build your e-Commerce Site with Netfirms

Buy China Products from Made-in-China.com

Cocktail Dresses

SmartPhone Cell Phone

Wholesale electronics

Web Hosting Rating

Buy WOW Gold

Get your cdl today

Debt collector review

  •  
  •  
  •  
  •  
  •  

Community News

Recent Comments

Random Posts


View all posts and news Back to top

About the Author

A web designer and developer who is passionate and keen on contributing to the web development industry. Feel free to say hi to me, or follow me on twitter.

Kevin Liew