Animate a Custom Dialog Box with CSS3 and jQuery
I am a particular fan of the jQuery UI library and have been following the team since it’s release. It features dozens of examples of how to pull together the best animations from such a small library of code. However in a lot of websites these days we are seeking to limit dynamic JavaScript blocks. As such CSS3 has become an important staple with building dialog boxes.
In this short tutorial I’d like to go over the process of building a simple fade-in dialog box. This may contain a signup/login form, input buttons, or even just a message to your visitors. The technique is pristine and gaining adoption in the sphere of web developers everywhere.
Setting the Stage
Your first step is to hit the jQuery website and check on their latest version. As of this writing it’s 1.7.1 stable release. If you wish to include animated effects from the jQuery UI library you may include this script as well. But your functional code will become much more convoluted with this extra pressure.
Now to save time let’s work off a bit of code from an earlier tutorial published in 2008. yens design has a fantastic bit of code written in jQuery which behaves as a popup box. To get a hold of their demo just download the rar package which includes the popup.js file.
Building our first HTML
Since the earlier tutorial was written a few years ago I feel we should work with only the important, up-to-date code bits. Thus I’ve created a brand new HTML document index.html and included my basic HTML5 boilerplate template.
This includes the doctype declaration and our starting scripts. The stylesheet style.css will include both the properties for our popup and for some of the new page edits. Check out my beginner’s template code below.
[cc lang=”css”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Dialog Box with Animation</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
</body>
</html>
[/cc]
Both the jQuery standard and UI libraries can be pulled directly from Google’s CDN. It has never been down for me, and I always rely on their hosted code for project files. Now that we have a page template setup I’d like to introduce a bit of the body content. I’ve included just this portion again for ease of access.
Inside the Popup
[cc lang=”html]
Built around CSS3 styles for added effect…
And works in all jQuery-supported browsers!
Important message text!
You may close this at any point by clicking off the window, or by using the top right corner ‘X’ button. jQuery is very forgiving in this regard 🙂
[/cc]
Inside the wrap div we’ve got all our main elements from within the tutorial. The displaypopup button could theoretically hold any item – anchor link, heading text, or even a replacement image. Ultimately jQuery is looking for the ID “displaypopup” to match and trigger a bind-click event handler.
All the content inside myPopup will be displayed within this new box. Inside our CSS rules we also set the default height, width, background, and similar properties of this box. Outside the backgroundPopup is used to differentiate between these 2 areas. If you noticed, our script will actually close down the window if you click anywhere else in the background! Pretty neat effect and very influential towards user experience.
So now let’s jump over and take a quick peek at some of our CSS styles. A lot has been kept similar to Adrian’s code in his previous tutorial. Yet we are using a bit of flair around the box to appear more animated.
Styling with CSS
First check out the page structure I’ve used for each core element. The Asterisk (*) selector is handy as an overall reset to browser defaults. Thus we remove all generic margins, padding, and inherit the default line-height appropriate to each font style.
[cc lang=”css]* {
margin: 0;
padding: 0;
line-height: inherit;
}
body {
background: #fff;
line-height: 1;
font-size: 12px;
font-family: Arial, Tahoma, sans-serif;
margin: 0;
height: 100%;
}
#wrap {
width: 600px;
background: #ddeef8;
margin: 0 auto;
margin-top: 55px;
padding: 14px 19px;
}
[/cc]
Also pick up how the body selector uses height: 101%; so the page loads by default displaying a scrollbar. This is important because even if your page content isn’t long enough to create one, a scrollbar will appear in some instances when your popup first opens. This bug has mostly been reserved to IE and Safari but it fixes other possible issues as well.
[cc lang=”css”]#backgroundPopup{
display: none;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000;
border: 1px solid #cecece;
z-index: 1;
}
#myPopup {
display: none;
position: fixed;
height: 300px;
width: 408px;
background: #fbfbfb;
border: 2px solid #cecece;
z-index: 2;
padding: 14px;
font-size: 14px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#myPopup h1{
text-align: left;
color: #6fa5fd;
font-size: 22px;
line-height: 28px;
font-weight: bold;
border-bottom: 1px dotted #D3D3D3;
padding-bottom: 2px;
margin-bottom: 20px;
}
#popupClose{
font-size: 16px;
line-height: 14px;
right: 6px;
top: 4px;
position: absolute;
color: #6fa5fd;
font-weight: bold;
display: block;
}
[/cc]
Now we have some of the juicier details pertaining with CSS3 properties out of the way. The backgroundPopup has an important role set to a black background color. Notice that we actually reduce the opacity with jQuery instead of CSS3, that way we’ve got more control over the animation. However I am noticing designers picking up CSS3 transitions which may eventually overtake this technique.
Inside the myPopup content box is all the heading text/closing link shown earlier. Additionally I’ve increased the border size to stand out as more significant in comparison with the deep background. Some real simple rounded corners in CSS3 makes the dialog feel less rigid than standard square corners.
Digging the jQuery Functions
If you’ve looked into the popup.js file at all you should notice a couple of things. Namely Adrian(the original developer) has created numerous functions which will save us time in the long run. With a few variables you can actually control the speed of the animation and how long the fade-in effect will take.
[cc lang=”javascript”]function loadPopup(){
if(popupStatus==0){
$(“#backgroundPopup”).css({
“opacity”: “0.7”
});
$(“#backgroundPopup”).fadeIn(“slow”);
$(“#myPopup”).fadeIn(“slow”);
popupStatus = 1;
}
}
function disablePopup(){
if(popupStatus==1){
$(“#backgroundPopup”).fadeOut(“slow”);
$(“#myPopup”).fadeOut(“slow”);
popupStatus = 0;
}
}
[/cc]
These two bits of code above are your action commands. loadPopup is the generic function call required to open a new popup window, while disablePopup will do just the opposite and close a currently opened window. Since these are written as functions within the scope of this tutorial we’ve targeted each specific ID name. But you can create a more versatile setup with variable parameters hard-coded into each function call.
We have a bit more code afterwards which helps to grab the browser height/width and adjust the window centered on the screen. But the final function calls a document.ready() clause which opens directly on page load. Check out my example edits from Adrian’s original code below:
[cc lang=”javascript”]$(document).ready(function(){
$(“#displaypopup”).click(function(){
centerPopup();
loadPopup();
});
$(“#popupClose”).click(function(){
disablePopup();
});
$(“#backgroundPopup”).click(function(){
disablePopup(); // clicked on the background
});
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
// pressed the esc key
}
});
});
[/cc]
We attribute a few click event handlers which each call a different function. If the user clicks anywhere outside of the window, presses the ESC key or clicks the small “x” link then the window will fade out to close. This also resets the popupStatus variable to 0, which you may call upon at any point during the script to check if the user can see the window or not.
Conclusion
I want to give a big thanks to Adrian Mato Gondelle who originally setup such a fantastic demo. I’ve incorporated his script in here as both a means to save time and stress messing with new jQuery functions. The code is open enough where you can pick apart each feature and re-implement it in an entirely different aspect, so why re-invent the wheel? And with so much browser support you can expect much more positive feedback from your visitors.
