Simplest of Simple Javascript Lightbox Scripts...
CSS:
.black_overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 15%;
left: 50%;
width: 500px;
height: 580px;
padding: 16px;
border: 16px solid #555;
background-color: white;
z-index:1002;
overflow: auto;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
behavior:url(border-radius.htc);
}
Javascript/HTML:
<div id="content" class="white_content">
<button style="float:right" onclick = "document.getElementById('content').style.display='none';document.getElementById('fade').style.display='none'">Close</button>
content or image goes here...
<button style="margin-bottom:20px;" onclick = "document.getElementById('content').style.display='none';document.getElementById('fade').style.display='none'">Close</button>
</div>
<div id="fade" class="black_overlay"></div>
Link:
<a href = "javascript:void(0)" onclick = "document.getElementById('content').style.display='block';document.getElementById('fade').style.display='block'">View Lightbox</a>
Comments