Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3

Written by Kevin Liew on 12 Jan 2010
382,782 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
Invincible 13 years ago
Can you please tell me i want to add facebook share button in this dialog box Please i will be very thank ful to you plz reply
Reply
Kevin Liew Admin 13 years ago
I think it should be quite simple... just put your facebook like button code in:

<div id="dialog-message"></div>

finger crossed, hopefully the iframe work alright.
Reply
nikhil 13 years ago
hey can you help me with incorporating an html form inside your dialog box.i need to take user input from a form(like text,select option) within the dialog box and then submit the values and close the dialog box on submit.nice project anyways!!! thanks.
Reply
Kevin Liew Admin 13 years ago
There are two ways to do it... you can use iframe and link it to your form, in that case, you don't have to worry about the logic after the form submission. The user will need to close the modal window manually, unless you call the javascript from the iframe and close it automatically.

the other method, which will be the tougher, you put your html form in the modal window and submit the form with ajax, and then hide the modal window.
Reply
Jennifer 13 years ago
I'm trying to use this in a table and the dialog box won't show up. Do you know how to incorporate it in a table?
Reply
Kevin Liew Admin 13 years ago
it should work fine inside a table, i don't think it will affect it. Make sure you have jquery and css linked properly.
Reply
Ajax 13 years ago
Can any one please explain where do i need to insert these CSS , Java script, and HTML code...
:P ya as u think , Im very very new to this subject
Reply
Kevin Liew Admin 13 years ago
hi, just download the zip file, you will able to see the right place to put all those codes.
Reply
mohammed 13 years ago
thank you so much for this great post.
Reply
holsher 13 years ago
Awesome!!! Exactly what i was looking for! Thanks

QUESTION: how do I make the for disappear only on button click and stay if user clicks anywhere else on it or gray background around it (bcs that's what happens on my page). Thanks
Reply
Kevin Liew Admin 13 years ago
simple:

$('a.btn-ok, #dialog-overlay, #dialog-box') <---- this line... remove everything excepr a.btn-ok
Reply
Dario 13 years ago
Very nice! Exactly what I was looking for...

2 Questions:

1) How does it know to close on a.btn-ok instead of a.button?
2) Is there an easy way to implement ajax? I tried .load() instead of .html() but it didn't work.

Thanks!
Reply
Dario 13 years ago
Nevermind on my last comment...the dialog was closing due to dialog-box (which I removed), not the button click(). You have an error in your javascript - a.btn-ok should be a.button

Still curious if you can implement an ajax call to a separate file with ease...

Thanks!
Reply
damith wanninayake 13 years ago
Thank you so much for develop this.. i used it for customized logging window..

www.uwudamith.wordpress.com
Reply
Owen 13 years ago
Here's how to add links into the popup: <a onclick="window.location='http://m.facebook.com/profile.php?id=257108587652035' ">Facebook</a>
Reply
adam 12 years ago
you made it viral now
Reply
VK 13 years ago
Great Article! I do have one question i.e. I am openning dialog with $("#mymodal").dialog({ buttons: { "OK": function() {keepSessionAlive();}}, modal: true, height: myHeight, width: myWidth, closeOnEscape: false, zIndex: 9999});
$("#mymodal").dialog('open');
But my problem is this dialog is not coming to the top of all other windows. I mean if i have shifted focus to other window (like outlook, winword or browsing any other site in separate IE instance etc.), the dialog is not coming to top of these windows. Any suggestions? Thanks in advance.
Reply
Kevin Liew Admin 13 years ago
could be z-index issue, set it to higher value.
Reply
VK 13 years ago
I tried increasing it but no luck. I tried z-index like 1000000, 999999 etc.
Reply
Kevin Liew Admin 12 years ago
Sorry, I wasn't reading your question properly. You were saying "coming on top of all other windows"... do you mean your other windows applications? If yes, that's not possible, it only appears inside a browser.
Reply
Tom Johnson 13 years ago
Hey I'm having some issues with the positioning of the box, when i click the button the first time the dialog box is in the right place but the second time I click it the box is somewhere off to the top. how can i fix this?
Reply
Kevin Liew Admin 12 years ago
Can I know what browser are you using, the guy above also has the same issue.
Reply
sunil 12 years ago
Hi Kevin. !!!URGENT!!!!
im having a google chrome software in that i added extension through the Js ,
present im trying wen i click on that button how to open a VC++ dialog box on chrome
Reply
Kevin Liew Admin 12 years ago
I don't really know VC++, but I guess you need to setup a demo and integrate it slowly.
Reply
Hugo Dias 12 years ago
Hi! I've a strange situation with this code! Work's perfect with IE, with Firefox, but with Chrome a problem happens! I've done a asp.net page, deployed it to a pre-prodution server and the messagebox fires with no problem with Chrome. Same files, in prodution server, the popup doesn't fires only with chrome (all other browser OK). I get the 'Close' link in the bottom of the page, with no popup and no freeze page. So Chrome works with one server and other don't... Does anyone had this problem??? Thank's for help
Reply
Lee 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 don't have the same problem with your demo. Any idea what's going on?
Reply
Kevin Liew Admin 12 years ago
Can I know what browser are you using, the guy below also has the same issue.
Reply
sunil 12 years ago
hey how to linkup from VC++ dialogbox to Javascript can you send me program
Reply
RJE 12 years ago
I am seeing the same issue and I am using Firefox 7.
Reply