home

Jquery Light Box

This is a simple and lightweight light box effect created without using any extra plugins or supporting files. with help of some jquery methods css.

Explanation about script

we have click event here when the user clicks on the button(button has a class called click-button) and the function can be run, first jquery animate method is only for effect(alpha,opacity effect) and major line is display block(by defaultly we have display none in css) here is display block will display the lightbox. even we close button function to close light box and another one is for close but this scenario is different whenever the user click anywhere in the body(container) light box will disappear.

$(document).ready(function(){
        $('.click-button').click(function(){
            $('.container, .light-box').animate({'opacity':'.10'},330);
            $('.light-box').animate({'opacity':'1.00'});					
            $('.container, .light-box').css('display', 'block');
        });
		
        $('.close-btn').click(function(){
            close_popup();
        });

        $('.container').click(function(){
            close_popup();
        });

        });
 
        function close_popup(){
            $('.container, .light-box').animate({'opacity':'0'}, function(){
            $('.container, .light-box').css('display', 'none');
        });
        }

Light Box HTML code

<button class="click-button">Click here to open Light box</Button>
<div class="container"></div>
<div class="light-box"><div class="close-btn">X</div></div>

Light Box Css code

.container{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:#0000ff;
	opacity: .0;
	filter:alpha(opacity=0);
	display:none;
}
 
 
.light-box{
	position:absolute;
	top:20%;
	left:40%;
	width:300px;
	background:#ffffff;
	z-index:1;
	padding:10px;
	border:5px solid #f00;
	border-radius: 15px;
	box-shadow:0px 0px 15px #444444;
	display:none;
}
 
.close-btn{
	float:right;
	margin-right:6px;
	cursor:pointer;
}
download
download