Navigation 02

JAVASCRIPT CODE: PASTE THIS BELOW <HEAD> AND NOWHERE ELSE-OR IT WON'T WORK

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>


$(document).ready(function() {

    //


//When you click on a link with class of poplight and the href starts with a #

$('a.poplight[href^=#]').click(function() {

    var popID = $(this).attr('rel'); //Get Popup Name

    var popURL = $(this).attr('href'); //Get Popup href to define size


    //Pull Query & Variables from href URL

    var query= popURL.split('?');

    var dim= query[1].split('&');

    var popWidth = dim[0].split('=')[1]; //Gets the first query string value


    //Fade in the Popup and add close button

    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://tiny.cc/closeimg" class="btn_close" title="Close Window" alt="Close" /></a>');


    //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css

    var popMargTop = ($('#' + popID).height() + 80) / 2;

    var popMargLeft = ($('#' + popID).width() + 80) / 2;


    //Apply Margin to Popup

    $('#' + popID).css({

        'margin-top' : -popMargTop,

        'margin-left' : -popMargLeft

    });


    //Fade in Background

    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.

    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies


    return false;

});


//Close Popups and Fade Layer

$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...

    $('#fade , .popup_block').fadeOut(function() {

        $('#fade, a.close').remove();  //fade them both out

    });

    return false;

});


});

</script>

THIS PART GOES AFTER <style>

#fade {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .80;
	z-index: 9999;
}

.popup_block{
	display: none;
	background: #FFFFFF;
	padding: 55px;
	float: left; height: 50%; color: #313131;
	position: fixed;
	top: 50%;  overflow-y: auto; overflow-x: no scroll;
	left: 50%;
	z-index: 99999;
}

img.btn_close {
    float: right;
	margin: -55px -55px 0 0; opacity: 0;
}


    #continue {
    margin-top:10px;
}

#titless { display:inline-block;
    background-color:#94adac;
    width:230px; font-family: calibri;
    padding:5px;
    color:#ffffff;
    letter-spacing:2px;
    font-size:8px;
    text-transform:uppercase;
    text-align:center; }

#continue a {
    display:inline-block;
    background-color:#94adac;
    width:70px; font-family: calibri;
    padding:5px;
    color:#ffffff;
    letter-spacing:2px;
    font-size:8px;
    text-transform:uppercase;
    text-align:center;
    border-bottom:2px solid transparent;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.links2 { font-family: cambria; font-size: 10px; font-style:italic; letter-spacing:2px; color: #8b8888;text-transform: lowercase; }

.links2 a { display: block; text-align:center;padding: 10px; margin: 5px;color:#fff; font-style:italic; letter-spacing:2px; color: #8b8888; border-bottom: 1px solid #f1f1f1;}


THE LINK; THIS GOES AROUND THE LINK YOU WANT TO SHOW IT UP AS. IN THE PREVIEW, I USED NAVIGATION. YOU'RE GOING TO HAVE TO FIND THE LINKS OF YOUR THEME IN THE HTML TO BE ABLE TO DO THIS. (I'D SEARCH /ASK IN CTRL+F OR LINKS) OR YOU COULD JUST PASTE THIS IN YOUR DESCRIPTION.

<a href="#?w=500" rel="TES" class="poplight">navigation </a>


NOW, THE LINKS PART. YOU CAN PASTE THIS ANYWHERE AFTER BODY. IF YOU'D LIKE TO ADD MORE LINKS, JUST COPY THE CODE BETWEEN (AND INCLUDING) <TABLE> and </TABLE>

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

<table><td>

<div id="titless">TITLE HERE</a></div>

<div class="links2">

<a href="/">Tag One</a>

 <a href="/">Tag Two</a>

 <a href="/">Tag Three</a>

 <a href="/">Tag Four</a>

<a href="/">Tag Five</a>

 <a href="/">Tag Six</a>

 <a href="/">Tag Seven</a>

</div> </td><td> <div id="titless">TITLE HERE</a></div>

<div class="links2">

<a href="/">Tag One</a>

 <a href="/">Tag Two</a>

 <a href="/">Tag Three</a>

 <a href="/">Tag Four</a>

<a href="/">Tag Five</a>

 <a href="/">Tag Six</a>

 <a href="/">Tag Seven</a>

</div>
</td></table>


<div id="continue"><center><a href="/">go home</a></div> <center><a href="http://claraosmin.tumblr.com/">credit </a>
</div>