Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3

Written by Kevin Liew on 12 Jan 2010
382,780 Views • Tutorials

Introduction

I've been working on a web application that requires intensive use of AJAX and Javascript. It has a fancy navigation menu (tab menu + lava lamp submenu), tab interface in sidebar, AJAX based calendar and schedule module, AJAX based registration and forgotten password...... it has heaps of scripts in it and it looks pretty good when they all work together.

This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of you as well. The reason I have this custom dialog box is due to the inconsistencies across different browsers. If you look at mac's firefox and windows' firefox, the dialog box is completely different!

One thing about this dialog box, it uses CSS3 drop shawdow and a completely CSS3 skined button. So, latest version of chrome, firefox and safari will have no problems with it, but for IE6 and 7, the script will work but the display of the dialog box will look plain, no rounded border, drop shadow and gradient (i think ie8 will work).

This is how it looks like:

jQuery Dialog box

This is how it looks like in IE:

jQuery Dialog box

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.

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

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

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

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

Conclusion

That's it, hope you enjoyed reading this. Drop us a comment if you have any questions.

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.

131 comments
Mike 12 years ago
Nice... HOWEVER without reasonable backwards compatibility it's a complete and utter fail in my opinion. It would be like having a vacuum cleaner that only works on Thursdays. I know it's hard but that is the true mastery of web design... making things look beautiful, easy to use, functional AND backwards compatible! It's very hard to do well, and I admit that it the holy grail that few designers achieve but it really is the way forward.
Reply
gazzer 12 years ago
which part of "but for IE6 and 7, the script will work" did you miss?
Reply
Marcus 12 years ago
Hi, just wondering if you found a solution to the issue of the box being placed to the top on the second click? Help would be greatly appreciated! Cheers.
Reply
Narendran 12 years ago
TRY THIS
I removed some line from thr.
$(document).ready(function () {
// 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

// assign values to the overlay and dialog box
$('#dialog-overlay').show();
$('#dialog-box').show();

// display the message
$('#dialog-message').html(message);
}
Reply
Fernando Gámbaro 11 years ago
Hi Im from Uruguay (spanish speaking)
I found where the position problem is.
Some how it recalculate the dialog-box height the secon time it show the dialog box.
var dialogTop = (maskHeight/3) - ($('#dialog-box').height());
so my solution is to get fixed dialog-box height.
var dialogTop = (maskHeight/3) - 51;

By the way.
Thanks
Fernando
Reply
Let him answer, sunil 12 years ago
For some reason when I use this dialog box, it works fine the first time I open and close it, but when I open it a 2nd time it pops up so that it's halfway off the top of the screen. I do notice however that in the page source, the dialogue-box is added a style, which moves it up from top:86px to top:-17px, after the first time opening. Why is that? I cannot find anything in the CSS or script that would cause this. I also cannot use CSS to change anything, not even with the !important feature.
And I am using Google Chrome
I've noticed that the answer to this question has been interrupted twice...
Reply
Narendran 12 years ago
TRY THIS
I removed some line from thr.
$(document).ready(function () {
// 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

// assign values to the overlay and dialog box
$('#dialog-overlay').show();
$('#dialog-box').show();

// display the message
$('#dialog-message').html(message);
}
Reply
I hate u B. Gates 12 years ago
Hello, thank you so much for developing this code. I've been trying to add some jquery fade and it worked perfectly on every browser, but......¿any bet? yes, IE. When I want to close it, it gets stuck into a loop. Here's the modified part:

$(document).ready(function () {
$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {
$('#dialog-overlay, #dialog-box').fadeOut('slow')();
return false;
});
$(window).resize(function () {
if (!$('#dialog-box').is(':hidden')) popup();
});
});

function popup(message) {

var maskHeight = $(document).height();
var maskWidth = $(window).width();
var dialogTop = (maskHeight/3) - ($('#dialog-box').height());
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).fadeIn();
$('#dialog-box').css({top:dialogTop, left:dialogLeft}).fadeIn();
$('#dialog-message').html(message);}



So I basically changed show & hide for fadeIn and fadeOut. Any suggestions? Thank you very much
Reply
Pablo 12 years ago
Don't forget that page could be scrolled down, and include the center offset to make it show in the X center.
// calculate the values for center alignment
var dialogTop = (maskHeight/3) - ($('#dialog-box').height()) + window.pageYOffset;

Thanks a lot !
Reply
kelly 12 years ago
the message window is not centering properly in IE8 for me. i have to scroll all the way to the top of the page to view it.
your code works in Firefox though - any thoughts for IE?
Reply
restard 12 years ago
thank you for great sources and examples!!!
can i ask sth.? i want to make the window pop up after few seconds, about 10 sec.
how can i make it???
Reply
Kevin Liew Admin 12 years ago
You can do it like this:

setTimeout("popup('test')", 10000);
Reply
Narendran 12 years ago
Awesome, Congrats!!!
Reply
Narendran 12 years ago
IE is not accepting more than some characters, because of that popup is not popping up in IE, please do the needful.http://forum.jquery.com/topic/jquery-on-ie

Narendran .N
http://forum.jquery.com/topic/jquery-on-ie
Reply
1tufgt 12 years ago
Is it possible to use a link within this popup?
Reply
Darrell 12 years ago
Hello and how are you today. My tech inquiry is creating a mouse click or preferable mouse scroll menu for my website. Heres a brief description, my site as it is organized has various links that when selected redirects to a new window or tab for the selected link. I would like to create a display window or an active dialog window as I have read that will embody the full contents of the selected link without redirecting to a new window or tab similar to the resizable Jquery dialog window or box. I have tried a few example yet I am not sure where to place the URL in the coding to create the desired window or dialog window or box. Need tech assistance.
Reply
marty 12 years ago
hey. anyone pls tell me the complete instructions how can i use this popup in my website..? i have put these stuff in my web but its not working properly. i am new in development so pls help me. thanks
Reply
Kevin Liew Admin 12 years ago
Download the demo? or go through this tutorial.
Reply
manoj kumar 9 years ago
hi Kevin how r you can you help me how we can create custom plugin with jquery for popup window
Reply
hooma 12 years ago
Really .. your explain method in more than wonderful,, thanks alot
Reply
Julie 11 years ago
Hi,

What should i do if i want the popup window only pop up upon a click. The demo you provide here ready loads a popup window on page load or on page refresh, that is the effect i do not want.

Another question is the location of the popup, can it be freely positioned?
Reply
Mark 11 years ago
Great explanation!

It really helps me a lot thanks to you. No problem on implementation to my site.
Reply