kuroo tetsurou

woizze

Tutorial: Pop Up Box for Tumblr

Wednesday, 13 November 2013 • 22:37 • 0 comments

Blerghh

This tutorial pop up is for tumblr. A little bit difference from blog but i think this is easy enough. Click here for live preview. Okay, actually the link is for my tumblr.

1. Copy the codes below between <head> and</head> tags. It means you can put it after the <head> code or before the </head> 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://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>

Pink: The url of close button. change it if you want to.

2. Copy and paste the code below and put it before the </style> code or after the <style type=”text/css”> code.

#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #ffffff;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
max-width: 400px;
padding: 0px;
border: 20px solid #ffffff;
float: left;
font-size: 1.1em;
position: fixed;
top: 47%; left: 51.5%;
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: px;
-moz-border-radius: px;
border-radius: px;
}
img.btn_close {
float: right;
margin: -20px -50px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

3. Paste this after the </body> code.

<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/URL.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></center></div> </div></div></div></div></div></div></div></div></div></div>

Attention: This code is for ask section only. if you don't want to put this, skip this step and go to the next step.

blue: Your url tumblr

4. Copy this and put at your navigation.

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

5. Copy this for your other pop up.

<div id="03" class="popup_block"> your content here </div>

and copy this link and put at your navigation.

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

6. Done.

Copy the 5th step if you want to add the pop up.

green: your div id code
red: your content there

If you want to add the pop up code, make sure the div id code at the link and the content is the same.
You may ask me if you don't understand.

Labels: exo, tumblr, tutorials