Untitled

-------------------------------------------------------------
O1. Paste this script after your <head></head> tag.
-------------------------------------------------------------


<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="http://static.tumblr.com/t0x3if6/GMOlnkeb4/close_window2.png" class="btn_close" title="Close Window" 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>


<!----------------------------------------------------------------->


if you want change your popup ''close'' button please
modify this step in your script.


//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="NEW BUTTON" class="btn_close" title="Close Window" alt="Close" /></a>');


change ' new button ' for your new image.


<!----------------------------------------------------------------->

------------------------------------------------------------------
O2. Paste this config before your </style> tag
------------------------------------------------------------------


#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -50px -50px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

h2{font: 9pt cambria !important; font-weight:normal; line-height:20px; margin:0px; color: #6c9ab0;}

<!----------------------------------------------------------------->


-------------------------------------------
O3. Paste it in your description or where you want to appear.
-------------------------------------------


<a href="#?w=500" rel="YOUR POPUP NAME" class="poplight"> YOUR LINK NAME </a>


ATTENTION!


( "#?w=500" ) = 500 is the size of your pop-up window! change if you want it smaller.


( EXEMPLE )


<a href="#?w=500" rel= " faq " class="poplight"> faq </a>


<!----------------------------------------------------------------->


-------------------------------------------------------------------------------------------------------------------------------
O4. Now attention! in this step you will put the contents of your pop-up that you want to create.
-------------------------------------------------------------------------------------------------------------------------------

PASTE THIS BEFORE YOUR {block:Posts} TAG.


<div id="REPEAT YOUR POPUP NAME" class="popup_block">

<h2> POPUP MENU TITLE </h2>

HERE YOUR CONTENT

</div>


( EXEMPLE )


<div id=" faq " class="popup_block">


<h2> MY FAQ </h2>


How are you :
I'm great.


</div>

<!----------------------------------------------------------------->

-------------------------------------
O5. How do i get more pop-up windows?
-------------------------------------


simple, look :


O1. just change the commands from your pop-up


( EXEMPLE )

<a href="#?w=500" rel="ask" class="poplight"> ask </a>
<a href="#?w=500" rel="me" class="poplight"> me </a>
<a href="#?w=500" rel="fav" class="poplight"> about </a>


O2. Now add the contents of each window :

( LOOK )


<!---------------------------- ask ------------------------------------->

<div id="ask" class="popup_block">

<h2> my ask </h2>

<iframe frameborder="0" scrolling="no" width="100%" height="500px" src="http://www.tumblr.com/ask_form/yoururlhere" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe> <!—[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script>

</div>


ATTENTION OMG GUYS :

change now my url for your url because now all asks are being redirected to my ask box this is strange.

<!---------------------------- me ------------------------------------->

<div id="me" class="popup_block">

<h2> about </h2>

i love food, etec etec

</div>

<!---------------------------- fav ------------------------------------->

<div id="fav" class="popup_block">

<h2> favorite </h2>

here my favorites blog

</div>

<!---------------------------- END ------------------------------------->

PAY ATTENTION :
the script above is important for your ask work in your pop up window!


<!----------------------------------------------------------------->

Tutorial courtesy of http://satan-face.tumblr.com and http://kid-cunt.tumblr.com. c: