Top Left Text cha

Website Development Services

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>
 
 
 
  • No comments found

Leave your comments

Post comment as a guest

0
Your comments are subjected to administrator's moderation.
X