VivekMishra

Make a lightbox with css

Posted on: November 12, 2008

/*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

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


  • 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

%d bloggers like this: