Tumblr Academy • Posts Tagged ‘pop up ask box’

POP UP ASK BOX STEP 4 (UPDATE)

So i have receive a bunch questions about pop up box in step 4 (where you should put the link code) and i’m sorry for the poor explaining before :P.

Ok. After done with step 1-3 u need to find your ask link, if your theme already come with ask link, go to customize > edit html > find the tags <a href="/ask">

Replace the highlight link with this link:

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

** if you put your ask link in your description, just follow the tutorial

Pop Up Ask Box on Your Main Page II

( when the box pop up, the background turn fade/black and just click anywhere to close the pop up box )

1. Copy and paste the code below between <head> & </head> tags.

<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. Paste this code under <style type=”text/css”> tags

#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. paste this code after </body> tags.

<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>

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

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

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

** change the “ask me” to title of your ask link

For pop up Links/Faqs ETC

Same like the 3rd step. put this code under the ask box code, just change the id number, example you put no.03 id=”03” or whatever you want and make sure the number must same in your link example rel=”03”

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

T E X T  H E R E

</div>

Link for the code is:

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

** if the code not working, move the code right BEFORE </body> tags

#CHECK THIS FOR EXTRA EXPLANATION WITH STEP 4.

Pop Up Ask Box on Your Main Page

1. Copy and paste the code below right after <head> tags.

<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>

**the highlighted is a image of “close” button. if you want change the image just replace with your url of image or you can choose here

2. Paste this code under <style type=”text/css”> tags

.popup_block{
display: none;
background: #D3D3D3;
background-image: url();
padding: 10px;
font-family: Garamond;
float: left;
font-size: 10px;
position: fixed;
top: 50%; left: 50%;
z-index: 2;
border: 2px solid #363636;
-moz-box-shadow: 0 0 5px #CFCFCF;
-webkit-box-shadow: 0 0 5px #CFCFCF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -5px -5px 0 0;
}
*html .popup_block {
position: absolute;
}

** if you want to customize your ask box, just change what you want, i already highlight the tags of color. you can insert image background if you like, just put the url between (url)

3. paste this code after </body> tags.

<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>

** make sure you replace the USERNAME wit your username!

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

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

** change the “ask me” to title of your ask link

CHECK THIS FOR EXTRA EXPLANATION WITH STEP 4

PLEASE FOLLOW THE INSTRUCTION CAREFULLY. FEEL FREE TO ASK ME IF YOU HAVE PROBLEM WITH IT.