asked on

lightbox troubleshooting...

I have the following html below but it doesn't show the box when I click on "Open Lightbox" (this image is from tutorial video I am watching)

<!DOCTYPE html>
<html><head><title>Lighbox Demo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<style type="text/css">
	body
	{
		font-family: Heletica, Arial;
	}
	.backdrop
	{
		position:absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: .0;
		filter: alpha(opacity=0);
		z-index: 50;
		display: none;
	}
	.box
	{
		position:absolute;
		top: 20%;
		left: 30%;
		width: 500px;
		height: 300px;
		background: #ffffff;
		z-index: 51;
		padding: 10px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shado: 0px 0px 0px #444444;
		-moz-box-shado: 0px 0px 0px #444444;
		box-shado: 0px 0px 0px #444444;
		display: none;
	}	
	.close
	{
		float:right;
		margin-right: 6px;
		cursor:pointer;
	}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			$('lightbox').click(function(){
				$('.backdrop, .box').css('display', 'block');
			});
		});
	</script>
</head>
<body>
<h1> Webpage...</h1>
<a href="#" class="lightbox">Open Lightbox</a>

		<div class="backdrop"></div>
		<div class="box"><div class="close"></div>This is the lightbox!!!</div>
 		
	<!--	
		<a id="A2" href="EEDynamicImage.html?img=location.png" target="_blank"><abbr title="Location map...">90024</abbr></a><br><br>
		<a id="A5" href="EEDynamicImage.html?img=dpic.png" target="_blank"><abbr title="Certificate...">Design Professional Insur. Co</abbr></a>
 -->
 
</body>
</html>

Open in new window

I have not downloaded anything related to lightbox yet if that is why I am not able to see this border.

ASKER CERTIFIED SOLUTION

Rainer Jeschor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mike Eghtebas

ASKER

Thank you.

I also had couple typos at

            -webkit-box-shadow: 0px 0px 5px #444444;
            -moz-box-shadow: 0px 0px 5px #444444;
            box-shadow: 0px 0px 5px #444444;