How to build a jQuery lightbox!

Sorry but screentoaster services that hosted this tutorial is no longer available and has removed all my hard work :(
That said, here was the final results to this video tutorial and can still be used as needed.

Today I wanted to show you how to build your own lightbox using jQuery and CSS.
Here is the completed code if you just want to study the little guy.
HTML:

<!DOCTYPE>
<html>
	<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>
	</head>

	<body>
	    <button id="action">Click Me</button>
	    <div id="lightBox">
	        <div id="lightWrap">
		        <div id="closeBox">X</div>
		        <h2>Hello, world!</h2>
		    </div>
		</div>
		<div id="shade"></div>
	</body>
</html>

CSS:

#lightBox {
	display:none; 
	margin:50px 0; 
	text-align:center;
	width:100%;
}

#lightWrap {
	background:#000; 
	border:2px #ccc solid; 
	color:#fff; 
	margin:auto; 
	position:relative;
	width:400px; 
	z-index:2;
}

#shade {
Ed TV series, and a host of social interactions - in short, http://www.donssite.com/viagra-2270 buy viagra relating. By silencing the pain siren, we ignore sildenafil generic uk  the underlying cause. The acai berry has been strongly levitra viagra cialis  promoted for weight loss. NO then enacts  online sildenafil the compound guanylate cyclase which brings about expanded levels of cyclic guanosine monophosphate (cGMP) and nitric oxide are boosted. 	background:#000; 
	display:none; 
	height:100%; 
	left:0; 
	opacity:0.5; 
	position:absolute; 
	top:0;
	width:100%; 
	z-index:1;
}

#closeBox { 
	background:#F36; 
	cursor:pointer; 
	height:16px; 
	line-height:15px; 
	position:absolute; 
	right:10px; 
	top:5px;
	width:16px;
}

Javascript:

$(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");
		});
	});
});

Thanks Everyone!
Devin R. Olsen

Devin R. Olsen

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:TwitterFacebookGoogle Plus