I decided to make a detailed tutorial for popups so here it is:
REMEMBER YOU MAY NEED TO RETYPE THE “”
Insert this code under <head> in your theme (this is right at the beginning of your theme code)
<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://upload.wikimedia.org/wikipedia/commons/f/f8/Tooltip-CloseButton.png" class="btn_close" title="escape" alt="escape" /></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 bolded url is the url of the close button in your popup. if you want to change it you right click on the image you want and select “copy image url” you can find some nice closebuttons here or you can also search google.
If you do not want a close button then you would remove that URL and you would also remove the words that alt=“escape” (just remove the word escape not the “” quotation marks or the word alt.)
Now insert this code under <style> or <style type=“text css”>
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #fff;
background-image: url(''); /*if you want to add a background image to go behind your popup */
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: 1px solid #ddd; /*color of the border of the popup box*/
float: left;
font-size: 12px; /*font size of the words inside the box */
position: fixed;
top: 50%; left: 50%;
z-index: 99999; /*if the box is hiding behind other things in your theme, add more 9′s */
}
img.btn_close {
float: right;
margin: -5px -5px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
this code is what your popup looks like. the #fade { is the background behind the popup box so change background: #fff; to any other color of add a background image by finding a picture you like and right clicking to get the image url.
Okay now enter this link in replacement to your ask link
<a href="#?w=500" rel="02" class="poplight">message</a>
the #?w=500 is your width of the popup so change that to adjust your width!
before you do this, make sure you know what a regular html link looks like
<a href="tumblr.com">what the link says</a>
so your ask link will look something like this:
<a href="/ask">message</a>
<a href="yourblog.tumblr.com/ask>message</a>.
an easy way to find your ask link is to search for what ever the ask link is on your blog by use of ctrl + f. so for example if on your blog your ask link is “mailbox” ctrl + f “mailbox” and it should bring you right to it. note: if you have narnia 2 or scrollr you will need to find this link. if you have a mac it’s probably command + f
{block:AskEnabled}<a class="various3" href="http://www.tumblr.com/ask_form/{Name}.tumblr.com">MESSAGE</a>{/block:AskEnabled}
because there is already a popup installed to those specific blinkanditsover themes.
if you need help finding your ask link feel free to pop us a message!
Now as the last step enter this code under </body> (NOT <body>)
<div id="02" class="popup_block">
If you would like a FAQ or ABOUT above your ask box put it here! seperate the paragraphs with <br> or <p>text</p> now right below this is your ask box code so dont delete that! and BE SURE to keep the div's at the end. they are very very important!
<iframe id="ask_form" style="background-color: transparent; overflow: hidden;" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" frameborder="0" scrolling="no" width="100%" height="150"></iframe>
</div></div>
-If you want to make another popup you can easily do so.
just add another link whererver you want the link to appear on your blog. just make sure you change the rel=“02” and the div if=“02” to another number that match <a href=“#?w=500” rel=“03” class=“poplight”>links</a>
<div id="03" class="popup_block">
LINKS HERE MAN
</div></div>
note i edited and added detailes from this tutorial
pixelskylines
2087
vaporwave
tangentwithtanner
yousharknotpass
turnnoffyourmind
