<head>
<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://media.tumblr.com/tumblr_lngwqr5hbf1qf72le.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>
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://media.tumblr.com/tumblr_lngwqr5hbf1qf72le.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>
<style type="text/css">
.popup_block{
display: none;
background: #fcfbf8;
padding: 10px;
border: 5px solid #f2e7e2;
float: left;
font-size: 10;
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: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
img.btn_close {float: right;margin: -20 -20px 0 0;}
*html #fade {position: absolute;}
*html .popup_block {position: absolute;}
display: none;
background: #fcfbf8;
padding: 10px;
border: 5px solid #f2e7e2;
float: left;
font-size: 10;
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: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
img.btn_close {float: right;margin: -20 -20px 0 0;}
*html #fade {position: absolute;}
*html .popup_block {position: absolute;}
<body>
<div id="Title" class="popup_block">
<center>
Text Here
</center></div>
<center>
Text Here
</center></div>
Link
<a href="#?w=500" rel="Title" class="poplight">Title</a>
More Pop Ups
(Ask) <a href="#?w=500" rel="02" class="poplight">Ask</a>
<div id="02" class="popup_block">
<center>
<iframe frameborder="0" border="0" scrolling="yes" width="400" height="200" allowtransparency="true" src="http://www.tumblr.com/ask_form/-yoshi.tumblr.com" ></iframe>
</center></div>
<center>
<iframe frameborder="0" border="0" scrolling="yes" width="400" height="200" allowtransparency="true" src="http://www.tumblr.com/ask_form/-yoshi.tumblr.com" ></iframe>
</center></div>
(Links) <a href="#?w=300" rel="links" class="poplight">Links</a>
<div id="links" class="popup_block">
<center>
<a href="http://-yoshi.tumblr.com/about">About</a><br>
<a href="http://-yoshi.tumblr.com/signs">Signs</a><br>
<a href="http://-yoshi.tumblr.com/signsimade">Signs I Made</a><br>
<a href="http://-yoshi.tumblr.com/tagged/me">Pictures of Me</a><br>
<a href="#?w=500" rel="blogroll" class="poplight">Blogroll</a><br>
<a href="#?w=300" rel="faves" class="poplight">Favorites</a><br>
-------------------------------------<br>
<a href="http://-yoshi.tumblr.com/tags">Tags</a><br>
<a href="http://-yoshi.tumblr.com/bands">Bands</a><br>
<a href="http://-yoshi.tumblr.com/videogames">Video Games</a><br>
<a href="http://-yoshi.tumblr.com/tv">Tv</a><br>
<a href="http://-yoshi.tumblr.com/animals">Animals</a><br>
-------------------------------------<br>
<a href="http://-yoshi.tumblr.com/tagged/%26amp%3B">Unreblogged Posts</a><br>
<a href="http://-yoshi.tumblr.com/tagged/personal">Personal Posts</a><br>
<a href="http://-yoshi.tumblr.com/tagged/gif">GIFs</a><br>
<a href="http://-yoshi.tumblr.com/tagged/video">Videos</a><br>
<a href="http://-yoshi.tumblr.com/tagged/audio">Audio</a><br>
<a href="http://-yoshi.tumblr.com/tagged/chat">Chats</a><br>
<a href="http://-yoshi.tumblr.com/tagged/ask">Asks</a><br>
-------------------------------------<br>
<a href="http://-yoshi.tumblr.com/celebritycrushes">Celebrity Crushes</a><br>
<a href="http://-yoshi.tumblr.com/tagged/unf">Unf</a><br>
-------------------------------------<br>
<a href="#?w=200" rel="pixels" class="poplight">Pixels</a><br>
<a href="#?w=200" rel="chibis" class="poplight">Chibis</a><br>
<a href="http://-yoshi.tumblr.com/scarves">Scarves</a><br>
<a href="http://jazzhandz.weebly.com/">Codes</a><br>
<a href="http://-yoshi.tumblr.com/backgrounds">Backgrounds</a><br>
<a href="http://-yoshi.tumblr.com/previousthemes">Previous Themes</a></center></div>
<center>
<a href="http://-yoshi.tumblr.com/about">About</a><br>
<a href="http://-yoshi.tumblr.com/signs">Signs</a><br>
<a href="http://-yoshi.tumblr.com/signsimade">Signs I Made</a><br>
<a href="http://-yoshi.tumblr.com/tagged/me">Pictures of Me</a><br>
<a href="#?w=500" rel="blogroll" class="poplight">Blogroll</a><br>
<a href="#?w=300" rel="faves" class="poplight">Favorites</a><br>
-------------------------------------<br>
<a href="http://-yoshi.tumblr.com/tags">Tags</a><br>
<a href="http://-yoshi.tumblr.com/bands">Bands</a><br>
<a href="http://-yoshi.tumblr.com/videogames">Video Games</a><br>
<a href="http://-yoshi.tumblr.com/tv">Tv</a><br>
<a href="http://-yoshi.tumblr.com/animals">Animals</a><br>
-------------------------------------<br>
<a href="http://-yoshi.tumblr.com/tagged/%26amp%3B">Unreblogged Posts</a><br>
<a href="http://-yoshi.tumblr.com/tagged/personal">Personal Posts</a><br>
<a href="http://-yoshi.tumblr.com/tagged/gif">GIFs</a><br>
<a href="http://-yoshi.tumblr.com/tagged/video">Videos</a><br>
<a href="http://-yoshi.tumblr.com/tagged/audio">Audio</a><br>
<a href="http://-yoshi.tumblr.com/tagged/chat">Chats</a><br>
<a href="http://-yoshi.tumblr.com/tagged/ask">Asks</a><br>
-------------------------------------<br>
<a href="http://-yoshi.tumblr.com/celebritycrushes">Celebrity Crushes</a><br>
<a href="http://-yoshi.tumblr.com/tagged/unf">Unf</a><br>
-------------------------------------<br>
<a href="#?w=200" rel="pixels" class="poplight">Pixels</a><br>
<a href="#?w=200" rel="chibis" class="poplight">Chibis</a><br>
<a href="http://-yoshi.tumblr.com/scarves">Scarves</a><br>
<a href="http://jazzhandz.weebly.com/">Codes</a><br>
<a href="http://-yoshi.tumblr.com/backgrounds">Backgrounds</a><br>
<a href="http://-yoshi.tumblr.com/previousthemes">Previous Themes</a></center></div>
(Blogroll) <a href="#?w=500" rel="blogroll" class="poplight">Blogroll</a>
<div id="blogroll" class="popup_block">
<center>
{block:Following}
{block:Followed}
<a href="{FollowedURL}" border="0"><img id="following" src="{FollowedPortraitURL-48}" border="0" title=”{FollowedName}”></a>
{/block:Followed}
{/block:Following}
</center></div>
<center>
{block:Following}
{block:Followed}
<a href="{FollowedURL}" border="0"><img id="following" src="{FollowedPortraitURL-48}" border="0" title=”{FollowedName}”></a>
{/block:Followed}
{/block:Following}
</center></div>
(Favorites) <a href="#?w=300" rel="faves" class="poplight">Favorites</a>
<div id="faves" class="popup_block">
<center>
→ Anime:<br>
<a href="http://theshittyrestaurant.tumblr.com/">theshittyrestaurant</a><br>
<a href="http://mycomicbook.tumblr.com/">mycomicbook</a><br>
<a href="http://raikyus.tumblr.com/">raikyus</a><br>
→ Video Games:<br>
<a href="http://gamegifs.net/">gamegifs</a><br>
<a href="http://dotcore.tumblr.com/">dotcore</a><br >
<a href="http://x-360.us/">x-360</a><br>
<a href="http://dualshockers.tumblr.com/">dualshockers</a><br>
→ Bands:<br>
<a href="http://vanswarpedtour.tumblr.com">vanswarpedtour</a><br>
<a href="http://warpedcore.tumblr.com/">warpedcore</a><br>
→ Tattoos:<br>
<a href="http://p33j4y.tumblr.com/">p33j4y</a><br>
<a href="http://suicideink.tumblr.com/">suicideink</a><br>
→ Quality:<br>
<a href="http://darkandchaos.tumblr.com/">darkandchaos</a><br>
<a href="http://dirtyatmosphere.tumblr.com/">dirtyatmosphere</a><br>
→ Vintage:<br>
<a href="http://hulkh4nds.tumblr.com/">hulkh4nds</a><br>
<a href="http://vdeans.tumblr.com/">vdeans</a><br>
→ Kawaii/Girly:<br>
<a href="http://inception-.tumblr.com/">inception-</a><br>
<a href="http://kawaiicandy.tumblr.com/">kawaiicandy</a><br>
<a href="http://pretty-glamorous.tumblr.com/">pretty-glamorous</a><br>
<a href="http://heyrainbows.tumblr.com/">heyrainbows</a><br>
→ Animals:<br>
<a href="http://animals-animals-animals.tumblr.com/">animals-animals-animals</a><br>
→ Food:<br>
<a href="http://shelovesasianfood.tumblr.com/">shelovesasianfood</a><br>
</center></div>
<center>
→ Anime:<br>
<a href="http://theshittyrestaurant.tumblr.com/">theshittyrestaurant</a><br>
<a href="http://mycomicbook.tumblr.com/">mycomicbook</a><br>
<a href="http://raikyus.tumblr.com/">raikyus</a><br>
→ Video Games:<br>
<a href="http://gamegifs.net/">gamegifs</a><br>
<a href="http://dotcore.tumblr.com/">dotcore</a><br >
<a href="http://x-360.us/">x-360</a><br>
<a href="http://dualshockers.tumblr.com/">dualshockers</a><br>
→ Bands:<br>
<a href="http://vanswarpedtour.tumblr.com">vanswarpedtour</a><br>
<a href="http://warpedcore.tumblr.com/">warpedcore</a><br>
→ Tattoos:<br>
<a href="http://p33j4y.tumblr.com/">p33j4y</a><br>
<a href="http://suicideink.tumblr.com/">suicideink</a><br>
→ Quality:<br>
<a href="http://darkandchaos.tumblr.com/">darkandchaos</a><br>
<a href="http://dirtyatmosphere.tumblr.com/">dirtyatmosphere</a><br>
→ Vintage:<br>
<a href="http://hulkh4nds.tumblr.com/">hulkh4nds</a><br>
<a href="http://vdeans.tumblr.com/">vdeans</a><br>
→ Kawaii/Girly:<br>
<a href="http://inception-.tumblr.com/">inception-</a><br>
<a href="http://kawaiicandy.tumblr.com/">kawaiicandy</a><br>
<a href="http://pretty-glamorous.tumblr.com/">pretty-glamorous</a><br>
<a href="http://heyrainbows.tumblr.com/">heyrainbows</a><br>
→ Animals:<br>
<a href="http://animals-animals-animals.tumblr.com/">animals-animals-animals</a><br>
→ Food:<br>
<a href="http://shelovesasianfood.tumblr.com/">shelovesasianfood</a><br>
</center></div>
(Pixels) <a href="#?w=200" rel="pixels" class="poplight">Pixels</a>
<div id="pixels" class="popup_block">
✿ <a href="/animepixels">Anime</a><br>
✿ <a href="/videogamepixels">Video Games</a><br>
✿ <a href="/filmpixels">TV & Movies</a><br>
✿ <a href="/dividers">Dividers</a><br>
✿ <a href="/favicons">Favicons</a><br>
✿ <a href="/arrows">Back to Top Arrows</a>
</div>
✿ <a href="/animepixels">Anime</a><br>
✿ <a href="/videogamepixels">Video Games</a><br>
✿ <a href="/filmpixels">TV & Movies</a><br>
✿ <a href="/dividers">Dividers</a><br>
✿ <a href="/favicons">Favicons</a><br>
✿ <a href="/arrows">Back to Top Arrows</a>
</div>
(Chibis) <a href="#?w=200" rel="chibis" class="poplight">Chibis</a>
<div id="chibis" class="popup_block">
ϟ <a href="/onepiecechibis">One Piece</a><br>
ϟ <a href="/fairytailchibis">Fairy Tail</a><br>
ϟ <a href="/fmachibis">Fullmetal Alchemist</a><br>
ϟ <a href="/narutochibis">Naruto</a><br>
ϟ <a href="/pokemonchibis">Pokemon</a><br>
ϟ <a href="/opxpchibis">One Piece x Pokemon</a><br>
ϟ <a href="/chibi">etc.</a>
</div>
ϟ <a href="/onepiecechibis">One Piece</a><br>
ϟ <a href="/fairytailchibis">Fairy Tail</a><br>
ϟ <a href="/fmachibis">Fullmetal Alchemist</a><br>
ϟ <a href="/narutochibis">Naruto</a><br>
ϟ <a href="/pokemonchibis">Pokemon</a><br>
ϟ <a href="/opxpchibis">One Piece x Pokemon</a><br>
ϟ <a href="/chibi">etc.</a>
</div>