Tutorials

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3

Written by Kevin Liew on 12 Jan 2010
286,672 Views • Shares
131 comments

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
Salsan Jose 5 years ago
Its beautiful and interesting. The magic of css and jquery..
Reply
Exceil 5 years ago
Hello! Great article!
I have a question, is to possible to this pop up shows in the intervening period? I mean now this window pop up with every site refresh not in every e.g. 3000 sec. This'll be sth with cache, could you think about this and help me? :)
Reply
Kevin Liew Admin 5 years ago
You can do it like this:

var show = setTimeout("popup()", 3000);
Reply
Joel 5 years ago
Is there any way to show dynamic information in this box, or just pre-defined HTML? For example, I'd like to be able to use this as a console so I can quickly see all existing form field values. that are on different 'screens' of an ipad web app. How can I send dynamic info to this box?
Reply
Kevin Liew Admin 5 years ago
of course you can, you will need to know ajax and a server side languages. Depend on how you do it, you can populate all the dynamic content to #dialog-message.
Reply
Sam 5 years ago
This is great thanks, if possible can you add the close button outside (the box) at the top right corner (I think an image icon is needed, here is one: http://i41.tinypic.com/fn8vur.png), also if possible to add video, images etc and make the border like this once: http://i41.tinypic.com/fn8vur.png), just click on the video.

Great work anyway, thanks
Reply
Aliu Mine 5 years ago
Great work!
But I have tried to use the dialog to display an image, it would not would not display!
Anyone with solution to this?
Reply
Kevin Liew Admin 5 years ago
How do you pass the image parameter to the popup function?
Reply
adam 5 years ago
integrated on my site without problem , thank you master
Reply
Narendran 5 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
Roy M J 5 years ago
Hi,, Did anyone manage to insert a form or input tags ?? For me it gave only an error and it was not working properly...<a href="javascript:popup('<input type='email' id='email' />&nbsp;<input type='button' onclick='forgot()'/>')">Forgot??!</a>


Any solution???
Reply
Kevin Liew Admin 5 years ago
Hi Roy, I think you use this script wrongly. It meant to display message only not DOM. If you need a popup with form, you need to use this tutorial:

http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Reply
resnbl 5 years ago
I would like to use this as a replacement for the standard confirm("Are you sure") dialog on an anchor. How can I call this from the onclick() handler on a link? (I suspect the popup(msg) function will return before the dialog is closed and the link's default action will be called.)
Reply
Kevin Liew Admin 5 years ago
You need to disable the link default behavior. You can do like this:

<a href="#" onclick="popup(msg); return false;">test</a>,

or, add return false in the end of the popup function.
Reply
Mark C 5 years ago
I love the script but I have the same issue that after the first click the dialog box gets displaced to the top of the screen (about halfway over the top). I've tested it on Firefox 9.01, Chrome 16.0.912.75 m, and IE 8.0 and they are all the same. Any ideas? thanks, Mark
Reply
Mark C 5 years ago
I kind of figured out the problem, I wanted to increase the size of the dialog box in the vertical since it would not automatically stretch vertically with my text, so I set height:300px; in the dialog-box css. But I can't figure out the solution, to increase the size of the box without it going off-screen. Any idea? Thanks, Mark
Reply
A2 5 years ago
Mark C just set the Height : AUTO
its work!
Reply
Mark C 5 years ago
Thanks, I'll give it a try!
Reply
Anderson 5 years ago
this is an excellent script! Thnx 4 sharing it. I'm 4rm Africa nd I glad 2 say dat with this script of urs u've been able 2 reach out to a lot of people u probably dnt hav an idea hw many. All d same, thnx.
I have jst one question tho, how do I align d pop up window relative to the particular position of d screen containing the link 4 d pop-up instead it's alignment to d center of d screen.
Thnx!
Reply
Rory 5 years ago
awesome post... i have it working... but wish to display an image in the box... any ideas? thanks :)
Reply
Kevin Liew Admin 5 years ago
It's possible, but a few things need to be changed:

I assume you will use <a> to activate the popup,
<a href="javascript:popup('Link-to-the-image')">Click</a>

Inside popup function, Line 36:
('#dialog-message').html(message); change it to

('#dialog-message').append('<img src="' + message + '"/>');

I haven't tested it, but I think it will work. The only thing you have to worry about it, is the dialogue dimension.
Reply
Josh 5 years ago
Is it possible to do an image float it to the left and then include some text?
The image alone works great, but it would be awesome if I could make it include some text as well.
Reply
MJP 5 years ago
I see you have to escape characters with this or the popup will not work. is this true? Thanks!
Reply
Kevin Liew Admin 5 years ago
Unfortunately yea, because of the the ability of able to read html elements, single quote and double quote. TO avoid breaking the script, you need to escape chars.
Reply
Narendran 5 years ago
Use 'sometext' instead of "sometext"
Reply