School Idol Festival -【 POPUP LAYOUT 1 by Anomaly ☽】

#1 - paste these where your scripts are (do not play with the scripts unless you know what you are doing)

<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet"> /*-- https://fontawesome.com/icons?d=gallery&m=free font awesome cheatsheet --*/

<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">x</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 between <style type="text/css"> and </style></head><body>

#fade { /*--Transparent background layer--*/
display:none; /*--hidden by default; do not change--*/
background:#000;
background-image:url('');
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
opacity:.80;
z-index:9999;
}

.popup_block{
display:none; /*--hidden by default; do not change--*/
background:#fff;
background-image:url('https://orig00.deviantart.net/70c9/f/2017/350/6/7/vo8wes0_by_kittystuff-dbwyjlr.png');
padding:14px;
border:2px solid #aaa;
box-shadow:0 0 0 2px #fff;
border-radius:20px;
float:left;
font-size:1em; /*--feel free to change this--*/
position:fixed;
top:50%;
left:50%;
z-index:99999;
}

.close {
position:absolute;
right:2px;
top:2px;
width:40px;
height:40px;
padding:1px;
background:#ff77aa;
border:2px solid #fff;
color:#fff;
border-radius:40px;
box-shadow:1px 2px 2px 0px rgba(0, 0, 0, 0.5);
text-align:center;
line-height:35px;
font-size:30px;
font-weight:bold;
}

/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position:absolute;
}

*html .popup_block {
position:absolute;
}


/*--------------------------------------------------*/

a.link {
display:inline-block;
width:232px;
padding:11px;
color:#fff;
background:#ff6699;
border:2px solid #fff;
box-shadow:1px 1px 1px 0px rgba(0, 0, 0, 0.75);
margin:12px;
border-radius:20px;
}

/*------------------------------------------------------------------------------------------------------*/

#3 - replace one of your links with this

<a href="#?w=900" rel="nav" class="poplight">[TITLE HERE]</a>

/*------------------------------------------------------------------------------------------------------*/

#4 - paste this between </body> and </html>

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

<a class="link" href="/"><i class="fa fa-circle"></i> example</a>
<a class="link" href="/"><i class="fa fa-circle"></i> example</a>
<a class="link" href="/"><i class="fa fa-circle"></i> example</a>

<a class="link" href="/"><i class="fa fa-circle"></i> example</a>
<a class="link" href="/"><i class="fa fa-circle"></i> example</a>
<a class="link" href="/"><i class="fa fa-circle"></i> example</a>

<a class="link" href="/"><i class="fa fa-circle"></i> example</a>
<a class="link" href="/"><i class="fa fa-circle"></i> example</a>
<a class="link" href="/"><i class="fa fa-circle"></i> example</a>

<a class="link" href="/"><i class="fa fa-circle"></i> examples</a>
<a class="link" href="/"><i class="fa fa-circle"></i> example</a>
<a class="link" href="/"><i class="fa fa-circle"></i> example</a>

<a class="link" href="/"><i class="fa fa-circle"></i> example</a>
<a class="link" href="/"><i class="fa fa-circle"></i> example</a>
<a class="link" href="/"><i class="fa fa-circle"></i> example</a>

<a class="link" href="/"><i class="fa fa-circle"></i> example</a>
<a class="link" href="/"><i class="fa fa-circle"></i> example</a>
<a class="link" href="/"><i class="fa fa-circle"></i> example</a>

</div></div>