Make a lightbox with css

Posted on: November 12, 2008

/*Light boxcss Start */

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;
filter: alpha(opacity=80);
display: none;

.white_content {
position: absolute;
top: 20%;
left: 35%;
width: 320px;
height: 350px;
padding: 5px;
border: 5px solid #D3D3D6;
background-color: white;
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 id=”fade” class=”black_overlay”></div>


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


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.


%d bloggers like this: