Easy Lightbox Effect Using JQuery

Having a fancy web site with cool pop up effects is always a good thing. The problem is that third-party scripts and css might affect your existing ones on your web site. It has happen to me before and it’s pretty annoying. So I thought it would be good to make a simple effect with the minimum code (JQuery with some CSS attached to it).

Live Demo | Download (86.5KB)

The Lightbox Effect

The principle is simple. Use a div – or set of divs – and show / hide it on demand.

First of all, you’ll need to import the JQuery Library to your page.

<script type="text/javascript" src="jquery.js"></script>

HTML

<p align="center"><a id="show-msg" href="#">Show Message</a> | <a href="#" id="show-img">Show Image</a></p>

<!-- Message Box -->
<div id="msg-box">
	<h2>Some Title Here</h2>
	<p>Type anything you want... be creative!</p>
	<p align="center">
    	<a id="close" href="#">Close</a>
	</p>
</div>
<!-- Message Box -->

<!-- Image Box -->
<div id="img-box">
	<img src="jquery.jpg" width="420" height="247" alt="JQuery">
	<p align="center">
    	<a id="close" href="#">Close</a>
	</p>
</div>
<!-- Image Box -->

<!-- Background Div -->
<div id="main-box"></div>
<!-- Background Div -->

CSS

/* Lightbox background */
#main-box {
    display: none;
    background: #161613;
    opacity: 0.7;
    filter: alpha(opacity=70);
    position: absolute;
    top: 0px;
    left: 0px;
    min-width: 100%;
    min-height: 100%;
    z-index: 1000;
}

/* Message Box */
#msg-box {
    display: none;
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -200px;
    width: 400px;
    background: #FFFFFF;
    color: #115577;
    padding: 10px 15px 10px 15px;
    border: 2px solid #EE6633;
    z-index: 1001;
}
/* Message Box */

/* Image Box */
#img-box {
    display: none;
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -210px;
    width: 420px;
    background: #FFFFFF;
    color: #115577;
    padding: 10px 15px 10px 15px;
    border: 2px solid #EE6633;
    z-index: 1001;
}
/* Image Box */

JQuery

$(document).ready(function(){
    $("a#show-msg").click(function(){
   	 $("#main-box, #msg-box").fadeIn(150);
    })

    $("a#show-img").click(function(){
   	 $("#main-box, #img-box").fadeIn(150);
    })

    $("a#close").click(function(){
   	 $("#main-box, #msg-box, #img-box").fadeOut(400);
    })
})

Pretty simple and you can always customize it to meet your needs.

Mad4Code