How to build a jQuery lightbox!

Today I want to talk about EVERYTHING lightbox. I want to show you how to build your own lightbox using jQuery and CSS. Not only build it but explain to you the road blocks and work arounds any normal developer would run into. We will go over each step on how to make the lightbox work in IE6, IE7 and IE8 as well as all other browsers.

Here is the completed code if you just want to study the little guy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Everything You Need to Know About a Lightbox!</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<style type="text/css">
#lightBox {width:100%; margin:50px 0px; text-align:center; display:none;}
#lightWrap {width:400px; background:#000; border:2px #ccc solid; margin:auto; color:#fff; position:relative;  z-index:2;}

#shade {width:100%; height:100%; position:absolute; top:0px; left:0px; background:#000; -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); display:none; z-index:1;}

#closeBox { width:16px; height:16px; line-height:15px; background:#F36; position:absolute; top:5px; right:10px; cursor:pointer;}
</style>
<script>
$(document).ready(function(){

	$("#action").click(function(){
		$("#lightBox").fadeIn("fast");

		if($("body").height() > $("body").offset().height){
				var sH = $("body").height();
			}else{
				var sH = $("body").offset().height;
		}

		$("#shade").css({height:sH+'px',}).slideDown("fast");

		$("#closeBox").click(function(){
			$("#lightBox").fadeOut("fast");
			$("#shade").slideUp("fast");
		});

	});

});
</script>
</head>

<body>
<button id="action">Click Me</button>

<div id="lightBox">
	<div id="lightWrap">
    	<div id="closeBox">X</div>
    	<h2>HELLO This is my very own custom built lightbox!!</h2>
    </div>
</div>

<div id="shade"></div>

</body>
</html>

Thanks Everyone!

About Author:

I work as a full time frontend web developer at ISITE Design located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

Follow Me:
TwitterFacebookGoogle Plus