Just another blog on the net

Tutorial: Pop-up box like mine
4 Nov 2011 | Comment

Straight to the tuto:

A reminder:
  • The CSS is what u paste between <style type="text/css"> and </style>
  • The HTML is what you paste between </style> and </body>
display: none;
background: #D3D3D3;
background-image: url(;
padding: 10px;
font-family: "short stack";
float: left;
font-size: 10px;
position: fixed;
top: 50%; left: 50%;
z-index: 2;
border: 2px solid #fff;
-moz-box-shadow: 9px 9px 9px #ECD872;
-webkit-box-shadow: 0 0 15px #ECD872;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
img.btn_close {
float: right;
margin: -5px -5px 0 0;
*html .popup_block {
position: absolute;
THE CSS(for title):
font-family:"dancing script";
  text-shadow: 0 0 0.1em      #ECD872, 0 0 0.1em      #ECD872
* search 'dancing script' on google/webfonts.

THE ESSENTIAL CODE(to be pasted between the tags </style> and </head> ):

<script> $(document).ready(function() { // $('a.poplight[href^=#]').click(function() { var popID = $(this).attr('rel'); //Get Popup Name var popURL = $(this).attr('href'); //Get Popup href to define size var query= popURL.split('?'); var dim= query[1].split('&'); var popWidth = dim[0].split('=')[1]; //Gets the first query string value $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="" class="btn_close" title="Close" alt="Close" /></a>'); var popMargTop = ($('#' + popID).height() + 80) / 2; var popMargLeft = ($('#' + popID).width() + 80) / 2; //Apply Margin to Popup $('#' + popID).css({ 'margin-top' : -popMargTop,'margin-left' : -popMargLeft }); $('body').append('<div id="fade"></div>');$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) return false; }); $('a.close, #fade').live('click', function() { $('#fade , .popup_block').fadeOut(function() { $('#fade, a.close').remove(); //fade them both out }); return false; }); }); </script>
*text in pink is the image for the close button. You can change it.

<div id="02" class="popup_block">
<Center><div class="title">YOUR TITLE</div><center>ANYTHING U WANNA WRITE HERE</center></div></div></div></div></div></div></div></div></div></div></div>
<a href="#?w=300" rel="02" class="poplight">LINK</a>
..and voila! u have urself a pop-up box(my version) :D Do not hesitate to ask me any questions regarding this..feel free to ask me anything u don't understand about this tuto.

Hi, I'm Grace and I maintain this blog with my occasional musings. Apart from writing, I like being occupied with anything artsy, I enjoy the company of books and I like unleashing my inner nerd through occasional coding. My ideal day would be holding a book in one hand, matcha in the other, ears plugged and a cat purring on my lap.