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
Source: academyoftumblr
351 Notes/ Hide
-
bygukxx likes this
-
radiuhm likes this
-
bigbangnoona likes this
-
efemell likes this
-
i-am-still-a-kid-at-heart likes this
-
horcruxesoverhallows reblogged this from academyoftumblr
-
creation-site-64 reblogged this from academyoftumblr
-
creation-site-64 likes this
-
saranghaekimchif reblogged this from academyoftumblr
-
introduction-to-my-ill-life reblogged this from academyoftumblr
-
nycfinest-rp likes this
-
rpinspirations likes this
-
andrew-helps reblogged this from leo-helps
-
baby-jey likes this
-
rootsyrockreggae likes this
-
thexgoodxsoldier likes this
-
zelongin likes this
-
daehyum likes this
-
inpursuitofflight likes this
-
daywalker-sleeptalker likes this
-
havocs-girl likes this
-
fuckyeahtlokfanarts likes this
-
blondbaek likes this
-
harsh-truth likes this
-
h3ll0-univers3 likes this
-
vlahoes reblogged this from academyoftumblr
-
manelairage likes this
-
cosmoeresunidiota likes this
-
hollowhivemind likes this
-
bkyung reblogged this from academyoftumblr
-
jiyeops likes this
-
earthness likes this
-
allyrps likes this
-
astarkrogers likes this
-
emilyofrps reblogged this from leo-helps
-
keir-reviews likes this
-
leo-helps reblogged this from rphelper
-
princessrps likes this
-
lestathelps reblogged this from legolasrps
-
hausofroleplay likes this
-
melanyarbelo likes this
-
monsterroleplayer likes this
-
rob-rph reblogged this from rphelper
-
liams-rph likes this
-
canadarps likes this
-
rphelper reblogged this from academyoftumblr
-
so-lovely-but-fuck-you likes this
-
elliebradshaw likes this
- Show more notes
