How to create a stunning and smooth popup using jQuery

Step 1: What We will do?

A picture is worth a thousand words… so We will learn how to do something like this:

As You can see We will do a simple HTML website with a button that activates our stunning and smooth popup :) . So let’s rox guys!

Step 2: Setting up our simple webpage

So we need a simple HTML webpage with 2 html divisions: popupContact for the popup and backgroundPopup for helps our popup gets more focus and style

And here go the CSS, to add style to our html document and most important to hide our html main divisions: popupContact and backgroundPopup that conforms the “popup core” and We don’t want to see our popup at the begining, right?

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}

Step 3: Adding magic to our popup with jQuery

Here is the core of the tutorial, the jQuery code that will allow Us to do a stunning and smooth window popup with just a few functions in our popup.js file, but first of all we must set up a variable called popupStatus to control the status of our popup:

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
[/sourcecode]

Now the function to load our popup:

[sourcecode lang='JAVASCRIPT']
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
[/sourcecode]

Function for close/disable our popup:

[sourcecode lang='JAVASCRIPT']
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
[/sourcecode]

We want to center our popup too…

[sourcecode lang='JAVASCRIPT']
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$("#backgroundPopup").css({
"height": windowHeight
});

}
So if we have a variable popupStatus to control the popup status and functions the functions: loadPopup, disablePopup and centerPopup for load, close and center our popup we need to interact with them by using jQuery events control in the $(document).ready function.

First of all remember that the following code will be into this:
[sourcecode='JAVASCRIPT']
$(document).ready(function(){
//following code will be here
});
[/sourcecode]

We want to activate our popup when the button with id #button is clicked, so:

[sourcecode='JAVASCRIPT']
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
[/sourcecode]

Simple eh?, so continue for the closing event. We want to close our popup in 3 different ways: Hitting ESC key, Clicking out from the popup and Clicking on X, so let’s do that:

[sourcecode='JAVASCRIPT']
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});



Step 4: Trying our stunning and smooth window popup in jQuery!