$(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=40)'}).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
});
});



// Now define one more function which is used to fadeout the 
// fade layer and popup window as soon as we click on fade layer
$('#fade, #close1, #close2, #close3, #close4, #close5, #close6, #close7, #close8, #close9, #close10, #close11, #close12, #close13, #close14, #close15, #close16, #close17, #close18, #close19, #close20, #close21').click(function() {


// Add markup ids of all custom popup box here 						  
$('#fade , #popup1 , #popup2 , #popup3 , #popup4 , #popup5 , #popup6 , #popup7 , #popup8 , #popup9 , #popup10 , #popup11 , #popup12, #popup13, #popup14, #popup15, #popup16, #popup17, #popup18, #popup19, #popup20, #popup21').fadeOut()
return false;
});
});