Tumblr Pop Up Ask Box

The Tumblr Ask box should be easily accesible for those Tumblelogs that trully want to engage their audience. What better then than having a Tumblr pop up ask box instead of having it in a different page?, it even fades out the background while you have the Ask Box on.

In order to do this, you just need to add some simple lines of Tumblr Codes and your ask box url.

How to Insert a Pop Up Ask Box to your Home Page

1. Right before the </head> tag, insert the following script




<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 href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" 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>

2. Now, search in your Tumblr Theme html, this line of code <style type=”text/css”>, and add this other bunch of code right below.




#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: -5px -5px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
	position: absolute;
}
*html .popup_block {
	position: absolute;
}

3. Then, a final batch of code must be added in order to get your Tumblr Pop Up Ask Box work. Paste this one AFTER the </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/USERNAME.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
</center></div>
 
</div></div></div></div></div></div></div></div></div></div>

4. Finally, as you may know, people still need to click on an “Ask Me” link, before getting the pop up, you need to find where is that url within your theme (easy if you search the anchor text, most of the time it’s just called Ask Me), and replace the entire link for the following one:




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

5. Update preview, SAVE and close the customize screen.

NOTE: If you want to close the pop up Tumblr Ask Box, just click anywhere in the screen.