Create Custom PopUp (Modal Window) with jQuery

May 24th

98 Comments

Here will try to create a modal window using css and jquery. Two years ago light box came into our life and it changes the traditional look of modal windows. We all have used modal window plugins once in our life as web designer or developer but the problem with it is you have to use the same layout formation which comes with modal window plugin you can just style the layout of model window but today here we will learn how to create a custom modal window, means here we will pop up the whole custom styled DIV as model window. Check out the tutorial to learn it but before getting started check out demo first.

Check Out Demo First

Files Needed Before Starting

Jquery Library

Step 1 : XHTML

First of all we need to add <a> tag with attribute rel(set rel for popup window), class popup (to trigger the popupbox). Here we will use 3 <a> tags for 3 different types of custom popup window.

Then we will write a markup for popup which can be placed anywhere in the page. Important point is that the id of markup will be matched with rel attribute of <a> tag.

Check out the codes below

<h1><a href="#" rel="popuprel" class="popup">Click Here for 1st Custom Modal Window</a></h1>
<h1><a href="#" rel="popuprel2" class="popup">Click Here for 2nd Custom Modal Window</a></h1>
<h1><a href="#" rel="popuprel3" class="popup">Click Here for 3rd Custom Modal Window</a></h1>
 
<div class="popupbox" id="popuprel">
<!-- Content For Pop Up Box one -->
</div>
 
<div class="popupbox1" id="popuprel2">
<!-- Content For Pop Up Box Two -->
</div>
 
<div class="popupbox2" id="popuprel3">
<!-- Content For Pop Up Box Three -->
</div>

Step 2 : CSS

Here first off all we need to design 3 custom backgrounds for our pop up then will style it.

Now lets style popup markup.

/* Style you custom popupbox according to your requirement */
.popupbox {
	width:500px;
	height:300px;
	background-image:url(images/pop-up_03.png);
	background-repeat:no-repeat;
	display: none; /* Hidden as default */
	float: left;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
}
.popupbox2 {
	width:454px;
	height:307px;
	background-image:url(images/pu_03.png);
	background-repeat:no-repeat;
	display: none; 
	float: left;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
}
.popupbox3 {
	width:502px;
	height:302px;
	background-image:url(images/3_03.png);
	background-repeat:no-repeat;
	display: none;
	float: left;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
}
#fade { 
	display: none; /* Hidden as default */
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}

Step 3 : Jquery

First step is to call jquery file which you download in local computer or you can link jquery file directly from Google code.

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

Now everything is set you got your jquery library linked with you document now lets create one more js file named custom.js and link it with you document and start writing codes in it.

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="custom.js"></script>

$(document).ready(function() {
	// Codes Goes Here...
});

Now lets get it working.. Check out below codes with full explanation in it. Thank You

$(document).ready(function() {
 
// Here we will write a function when link click under class popup				   
$('a.popup').click(function() {
 
 
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link							
var popupid = $(this).attr('rel');
 
 
// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();
 
 
// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
 
// Now here we need to have our popup box in center of 
// webpage when its fadein. so we add 10px to height and width 
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
 
 
// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});

Demo Download

Note : You can add close button into it too. Play with the custom popup.

Want to pass ecommerce hosting exams? Check out our latest 352-001 study guides and 642-415 demos give you 100% exam pass guarantee of pass4sure 70-236. You can also get ccda certification dumps from this website.