Jquery script(Don't forget to include jquery library)
/*Smooth Pop up window*/
var popupstatus = 0;
//Loading Popup window
function loadpop(){
if (popupstatus == 0)
{
$('#base').css({'opacity':'0.6'});
$('#base').fadeIn('slow');
$('.more').fadeIn('slow');
popupstatus = 1;
}
}
//Disabling popup window
function disablepop(){
if (popupstatus == 1)
{
$('#base').fadeOut('slow');
$('.more').fadeOut('slow');
popupstatus = 0;
}
}
//Making the lightbox center to the page
function poscenter(){
var windowwidth = document.documentElement.clientWidth;
var windowheight = document.documentElement.clientHeight;
var popwidth = $('.more').width();
var popheight = $('.more').height();
$('.more').css(
{
'top':windowheight/2-popheight/2,
'left':windowwidth/2-popwidth/2
});
}
//Loading Popup
$(document).ready(function(){
$('#html a').click(function(){
poscenter();
loadpop();
})
});
//Disable Popup
$(document).ready(function(){
$('.more a.close').click(function(){
disablepop();
});
$('#base').click(function(){
disablepop();
});
});
HTML part
<div id="base"></div>
<div id="htmlmore" class="more">
<p align="right"><a href="#close" class="close">X</a></p>
The content will goes here.
<div>
CSS part
#base {
display:none;
background:#666;
opacity:0.6;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
.more {
display:none;
position:absolute;
z-index:2;
width:400px;
height:300px;
background:#fff;
padding:10px;
border:solid 2px #666;
}
No comments:
Post a Comment