Simple JavaScript Lightbox
JavaScript Code :
<script type="text/javascript">function showMe() {
document.getElementById("bg_div").style.display = "block";
document.getElementById("pop_up").style.display = "block";
}
function hideMe() {
document.getElementById("bg_div").style.display = "none";
document.getElementById("pop_up").style.display = "none";
}
</script>
CSS Code :
<style>#bg_div{
position:absolute;
width:100%;
left:0px;
top:0px;
display:none;
height:100%;
background-color:#000000;
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
}
#pop_up{
position:absolute;
width:60%;
left:330px;
top:280px;
display:none;
}
</style>
HTML Code :
<html><body>
<div id="bg_div"></div>
<div id="pop_up">
<table border="0" width="70%" cellspacing="0" cellpadding="1" bgcolor="#6CAC43">
<tr>
<td width="100%" align="left">
<table border="0" align="left" width="100%" cellspacing="0" cellpadding="2" bgcolor="#FFFFFF">
<tr>
<td style="background-color:#6CAC43;" align="left"><strong>Simple Lightbox, Version 1.0</strong></td>
<td style="background-color:#6CAC43;" align="right"><span onclick="hideMe()" style="cursor:pointer" title="Close">Close</span></td>
</tr>
<tr>
<td colspan="2" height="100"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<span onclick="showMe()">Display</span>
</body>
</html>