Bits and pieces of my life
Tutorial: Pop-up Box

Want a stylable pop-up box like that? alright, here's as to what you should do;
Copy the code below and paste it before <style type="text/css">
<script type="text/javascript"
$(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;

As for the CSS, the codes are as follows-copy them all and paste after the tag <style type="text/css">
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .20;
z-index: 9999;
display: none;
background: #fff;
padding: 10px;
font-family: "short stack";
float: left;
font-size: 10px;
position: fixed;
top: 50%; left: 50%;
z-index: 20000000;
border: 7px solid #e4aa93;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
img.btn_close {
float: right;
margin: -5px -5px 0 0;
border: solid 1px #fff;
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
*html .popup_block {
position: absolute;

  color: #e4aa93;
*html .popup_block {
position: absolute;

Now for the HTML Markup. Copy the following codes and paste it after the tag </body></html>
<div id="06" class="popup_block"><div style="width:auto;height:150px;overflow:auto; ">
    <Center><div class="title">Leave your footprints</div></center><center>
<div><div>YOUR CBOX CODES HERE</div>

...and lastly, the important step,linking the Pop-up box. Type out a link text anywhere you want, as long as it's between the tags <body>and</body>.Now what you've gotta add is-sth like the below;

<a href="#?w=400" rel="06" class="poplight">Chat</a>

#the letters in bold are the important ones you shouldn't miss out. And that's about it.. you're done!
If there's any problem you encounter in coding a pop-up box and if there's anything you don't understand in this tutorial, pardon me and thus, please do not hesitate to ask me in my CBOX. Thank you ;)

Newer Posts Older Posts