Finally an easy clean basic web 2.0 light box that’s easy to use and install, the only installation instructions are copy and paste !
I’m not going to go deep into this one, it’s quite basic, this light box pop up uses CSS to open, not like the hectic Javascript boxes that has 8000 lines of code and takes a couple of generations to understand.
The Following code goes into your <body></body> tags:
<div id=”wrapper” align=”center”>
<p>Some Page Content, Click <a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=
‘block’;document.getElementById(‘fade’).style.display=’block’”>here</a> To View The Lightbox</p>
<div id=”light” class=”content”>
<div id=”light”> This will be your LightBox Content</div>
<div id=”close”><a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’none’;document.getElementById(‘fade’)
.style.display=’none’” ><img src=”images/close.png” /></a></div>
</div>
<div id=”fade” class=”black_overlay”></div>
</div>
Insert this part into your CSS head section or external style sheet:
<style>
body {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:18px;
}
img {
border:none;
}
#wrapper {
position:relative;
width:800px;
height:300px;
margin-left:20%;
margin-right:20%;
border:1px dotted #C30;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
-khtml-border-radius: 11px;
border-radius: 11px;
background-color:#333;
padding:10px;
}
.lightbox {
display:none;
width:550px;
height:350px;
background-repeat:no-repeat;
}
.content {
display:none;
width:550px;
height:auto;
background-color:#FFF;
border: 1px solid #C63;
z-index:1000;
}
#close {
position:relative;
margin-top:-53px;
margin-left:530px;
}
#light {
padding: 20px 20px 20px 20px;
background-color:#eeeeee;
color:#FFF;
font-weight:bold;
background-image: url(bg.png);
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
-khtml-border-radius: 11px;
border-radius: 11px;}
a:link {
color:#C60;
text-decoration:none;
}
a:hover {
color::#C03;
text-decoration:none;
}
</style>
How it works:
The light box is mainly controlled by the CSS and Divs. When it calls the “document.getElementById” it basically loads the css box styles and displays your light box. This specific light box is extra light because of the fact that it does not carry any extra JavaScript to load, so everything is static and preloaded for this one. You cam always pop in some extra Javascipt to make it slide open or shift down from wherevver, just thought I’d share the easy version.
Download the source files: 
