Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3


Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3

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.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

124 comments

Darrell
Thu, 10th May 2012
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
Tue, 26th June 2012
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
Tue, 26th June 2012
Download the demo? or go through this tutorial. Reply
hooma
Thu, 5th July 2012
Really .. your explain method in more than wonderful,, thanks alot Reply
Julie
Tue, 2nd October 2012
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
Tue, 27th November 2012
Great explanation!

It really helps me a lot thanks to you. No problem on implementation to my site. Reply
Tajuddin
Thu, 27th December 2012
thanks a lot !! this helped me a lot ..... Reply
Keshav Kalra
Tue, 22nd January 2013
Thanks boss for your help great work

(y) Reply
mike
Fri, 8th March 2013
Hi,

I'd like to popup to appear on click. How can I do that?

Thanks Reply
Kevin Liew Admin
Fri, 15th March 2013
<a href="javascript:popup('Here is your message')">Click here</a>,

Alternatively, you can use jQuery Reply
Jason
Wed, 20th March 2013
Hi nice script. really handy.

I'm trying to get it to take action from a hover not a click. any suggestions? Reply
Anand
Sat, 1st June 2013
shows only a blank page on implementing codes above for dialog boxes Reply
Nin
Mon, 17th June 2013
this code won't work on firefox 21.0
why? sorry I'm a beginner. Reply
Guilherme Schmidt Rossi
Mon, 8th July 2013
Just a correction: if you want to this code be in the center of large pages you need to change the position from 'absolute' to 'fixed'. By the way, the code is awsome!!! Congratulations... Reply
Rocco
Thu, 12th September 2013
Bravo man - this is great - helped me out a ton. Many many thanks! Reply
Zamir
Sun, 15th September 2013
Thanks.I liked. Reply
Bill
Thu, 19th December 2013
Thanks but would this be a better demo if it was not using JQuery? Reply
Eric
Thu, 20th March 2014
I would like to add some div tags to my dialog box. When I add the div it crashes the script. Do you have any suggestions? This is exactly what I'm looking, but only if I can add divs to it. Reply
Ashwini
Wed, 2nd April 2014
I need help in Jquery dialog box.

I could get jquery dialog box with rich text editor, however its not editable,can you pls resolve. Reply
Anton
Thu, 29th May 2014
Try to open the jquery in notepad and save and overwrite it not in ANSI but in UNICODE again Reply
Jay
Sat, 13th September 2014
Great work! My question: the "pop-up" scrolls up and down with my page. How can I center it vertically in the window, independent of the length of the page? Thanks! Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement