VivekMishra

Posts Tagged ‘How to make light box with css and js

/*Light boxcss Start */

.black_overlay{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
/*width: 1004px;*/
/*height: 665px;*/
width: auto;
min-width: 1024px;
_width: 1024px;
height: auto;
min-height: 665px;
_height: 665px;
background-color: black;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
display: none;
z-index:9999;
}

.white_content {
position: absolute;
top: 20%;
left: 35%;
width: 320px;
height: 350px;
padding: 5px;
border: 5px solid #D3D3D6;
background-color: white;
z-index:99999;
overflow: auto;
display: none;
}

/* End */

/Show Light Box  Script */

<a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block'” class=”normal_link”>edit</a>
<div id=”light” class=”white_content” >

// Write your content here ///

<div align=”right”><a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none'”><img src=”images/closelabel.gif” border=”0″ /></a></div>
</div>

<div id=”fade” class=”black_overlay”></div>

Advertisements


  • None
  • Mr WordPress: Hi, this is a comment.To delete a comment, just log in, and view the posts' comments, there you will have the option to edit or delete them.

Categories