Popup ask box tutorials

POPUP ASK BOX CODE:

1. Copy and paste the code below under <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() {
//
$('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 title="Close this tab" href="#" class="close"><img src="https://cdn1.iconfinder.com/data/icons/bwpx/icons/symbol_multiplication.gif" class="btn_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>

2. Copy the code below and paste it under <style type=”text/css”> tag.

#fade{ /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background-image: url(http://25.media.tumblr.com/tumblr_mb1ci5hKbh1rt23hno1_400.gif);
position: fixed; left: 0; top: 0;
width: 150%; height: 150%;
opacity: 0.6;
z-index: 100;
}

.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
padding: 15px;
padding-bottom: 5px;
border: 3px solid {color:Blogtitle};
overflow: show;
float: left;
text-transform:normal;
font-family:calibri;
font-size: 11px;
line-height:14px;
opacity:1;
position: fixed;
top: 50%; left: 50%;
z-index: 999999;
color: {color:Text};
/*--CSS3 Box Shadows--*/
-moz-box-shadow: 0 0 10px 20px {color:Blogtitle};
-webkit-box-shadow: 0 0 10px 20px {color:Blogtitle};
box-shadow: 10px 10px 80px {color:Blogtitle};
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

img.btn_close {
float: right;
margin-top: 5px;
margin-right: 3px;
}

/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

** if you want to customize your popup ask box, just change what you want

3. Copy the code below and paste it under </body> tag.

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

<center><font size="5" color="#1C1C1C">Ask Me Anything<p></font><iframe frameborder="0" scrolling="yes" width="100%" height="150" src="http://www.tumblr.com/ask_form/YOURURL.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
</center></div>
</div></div></div></div></div></div></div></div></div></div>

** make sure you replace the YOURURL with your username!

4. Change the code of your “ask” link to the code below.

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

** change the “ask me” to the title of what you want