Simple Lightbox effect with jQuery

October 12, 2012 jQuery 6 comments

A lightbox allows to easily display information for the user without redirecting the user to a new page. In this tutorial, I will show you how to create a simple and nice lightbox effect with jQuery.

Demo
Download

HTML

The HTML structure contains an overlay element and the lightbox itselt.

<div class="overlay"></div>
<div class="lightbox">
	<h3>Lightbox</h3>
	<a href="#" class="close"><img src="close.png" alt="Close" /></a>
	<p>
	The lightbox content goes here.
	</p>			
</div>
<a href="#" class="open">Open Lightbox</a>

We have a link with class open, by clicking this link, the overlay element should appear and cover the entire screen, and the lightbox should appear on it.
The lightbox contains a link with class close. The lightbox should close by clicking this link or anywhere outside the lightbox.

CSS

We will set some some of the CSS properties for the overlay and lightbox elements.

.overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: 100%;
    z-index: 1;
    background: #000;	
	opacity: 0.8;
}

.lightbox {
    display: none;    
    width: 500px;
    padding: 25px;
	background: #ffffff;	
	box-shadow: 0 0 25px #111111;
    -moz-box-shadow: 0 0 25px #111111;
    -webkit-box-shadow: 0 0 25px #111111;		
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;    
    z-index: 99;	
}

a.close {
    position: absolute;
    top: 15px;
    right: 15px;
}

In the above CSS we have set the display:none to hide overlay and lightbox elements initially. The overlay has absolute position with top and left 0 so that it covers full screen. We have set opacity: 0.8 so that it gives the nice semi transparent look.
The higher z-index value of lightbox makes sure that it appears on the top of the overlay element.

jQuery:

Lets start with jQuery.

<script type="text/javascript">
  $(document).ready(function(){

  });
</script>

This tells the browser to run the code when the document is ready.

We want to show the lightbox in the center of the screen, so we can set its position dynamically.

jQuery('.lightbox').css({
	position: 'absolute',
	top:'50%',
	left:'50%',
	margin:'-'+(jQuery('.lightbox').height() / 2)+'px 0 0 -'+(jQuery('.lightbox').width() / 2)+'px'
});

The above code adds the css properties to the lightbox element. It sets its position abolute, and sets the margin according to its width and height.

Now the lightbox should appear when a link with the class open is clicked.

jQuery('a.open').click(function(e) {
	e.preventDefault();
	jQuery('.lightbox').fadeIn(800);
    jQuery('.overlay').fadeIn(800);
});

This code displays lightbox and the overlay with the fading effect. We have set the speed 800, you can make it faster or slower by decreasing or increasing the value.

The lightbox should close if the close link or anywhere outside the lightbox element is clicked.

jQuery('a.close, .overlay').click(function(e) {
	e.preventDefault();
	jQuery('.lightbox').fadeOut(800);
    jQuery('.overlay').fadeOut(800);
});

This function simply hides the lightbox and overlay element with fadeout effects if a link with close class is clicked or the div with overlay class is clicked.

Thats all. Here’s the complete jQuery code:

<script type="text/javascript">

jQuery(document).ready(function () {

    //Set the lightbox position in the center of screen
    jQuery('.lightbox').css({
		position: 'absolute',
		top:'50%',
		left:'50%',
		margin:'-'+(jQuery('.lightbox').height() / 2)+'px 0 0 -'+(jQuery('.lightbox').width() / 2)+'px'
	});

    //Show the lightbox with background if the link is clicked
    jQuery('a.open').click(function(e) {
		e.preventDefault();
		jQuery('.lightbox').fadeIn(800);
        jQuery('.overlay').fadeIn(800);
    });

    //Hide the lightbox and background if the close link or overlay div is clicked
    jQuery('a.close, .overlay').click(function(e) {
		e.preventDefault();
		jQuery('.lightbox').fadeOut(800);
        jQuery('.overlay').fadeOut(800);
    });

});
</script>