popup tutorial

ADD THIS ABOVE </head>:
------------------------------
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size

//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value

//Fade in the Popup and add close button
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="https://31.media.tumblr.com/7d91072c76c4379e9c9625a9b318cabf/tumblr_inline_n7oirdgCRB1rshr70.png" class="btn_close" title="close" alt="Close" /></a>');

//Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;

//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies

return false;
});

//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();  //fade them both out
});
return false;
});

});
</script>

---------------------------------------------------------------------------------------------------------------------------------------
ADD THIS ABOVE </style>:
---------------------------
#fade {
	display: none;
	background: #000;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: .20;
	z-index: 9999;
}

.popup_block{
    height:auto;
	display: none;
	background: {color:Box Background};
	font-family:{text:font};
	font-size:20px;
	padding: 20px 20px 40px 30px;
	float: center;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 99999;
	-moz-border-radius:4px;
    -webkit-border-radius:4px;
}

#popup_title {
    font-size:30px;
    font-family:{text:font};
    position:fixed;
    margin-top:-50px;
    font-style:italic;
    letter-spacing:3px;
    color: {color:link};
    -webkit-filter:blur(0.8px);
}

img.btn_close {
    margin:-12px 0 0 495px;
    position:fixed;
	float: right;
}

*html #fade {
	position: absolute;
}

*html .popup_block {
	position: absolute;
}

/** ABOUT POPUP **/
#window  {
    width:490px;
    height:180px;
    letter-spacing: 1px;
    float:right;
    margin-top:0px;
    font-family: {text:font};
    font-size: 11px;
    color: {color:text};
    padding:10px;
    border: 1px solid {color:Link};
    border-radius: 8px;
}

#window img{
    max-width:175px;
    max-height:180px;
    float:left;
    border-radius: 8px;
}

#cloud {
    float:right;
    width:308px;
    height:180px;
}

#stats  {
    float:left;
    font-family: {text:font};
    font-size: 20px;
    color: {color:text};
    background-color: {color:Posts};
    border: 1px solid {color:Link};
    margin: 0px 8px 8px 0px;
    padding:5px;
    max-width:180px;
    letter-spacing: 1px;
    border-radius: 8px;
}

#bio  {
    float:left;
    font-family: {text:font};
    font-size: 20px;
    color: {color:text};
    background-color: {color:Posts};
    border: 1px solid {color:Link};
    padding:5px;
    width:290px;
    max-height:150px;
    overflow:auto;
    font-size: 20px;
    letter-spacing: 1px;
    border-radius: 8px;
}

---------------------------------------------------------------------------------------------------------------------------------------
ADD THIS SOMEWHERE IN THE BODY (PREFERABLY UNDER DESCRIPTION):
----------------------------------------------
<a href="#?w=500" rel="popup" class="poplight"> TEXT </a>

<a href="#?w=500" rel="popup" class="poplight" title="{text:link title}" style="background:transparent;"><img src="{image:link button}"></a>

---------------------------------------------------------------------------------------------------------------------------------------
ADD THIS SOMEWHERE ABOVE THE THEME CREDIT (IF THERE IS ONE) OR ABOVE {block:posts}
---------------------------------------------------------------------------
<div id="popup" class="popup_block">
<div id="popup_title">инфо</div>

<div id="window">
<img src=" IMG LINK ">

<div id="cloud">
<div id="stats"> TEXT </div>
<div id="stats"> YOU CAN DELETE OR ADD AS MANY OF THESE AS YOU WANT </div>
<div id="stats"> dgdfgdfgdfg </div>
<div id="stats"> dfdfdf </div>
<div id="stats"> dfgdgdgdfgfd </div>

<div id="bio">
bagkjfdgshfldshfj;dhdslhsdlffldsjldsfsfs
</div>

</div>
</div>

</div>