Thursday, July 15, 2010

Simple lightbox in Jquery

I am really happy to write about this lightbox. I thought it'll be hard to create a lighbox but i tried the below script it's fantastic. You can do really enjoy!


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: