Lightbox effect with CSS without any JS file

To get Light box effect without java script always a tough task. i got this solution from a web site .. You can use this example its working fine.

Code:

CSS:

.white_overlay {

display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #ffffff;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);

}

.white_content {

display: none;
position: absolute;
top: 25%;
left: 25%;
height:385px;
width:680px;
padding: 1px;
background-color: white;
z-index:1002;

}

HTML:

‹a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"› To display a lightbox click here‹/a›

‹div id="light" class="white_content"› Popup Content div will come here

‹a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"›To Close Lightboc click here‹/a›

‹/div›

‹div id="fade" class="white_overlay"›‹/div› ‹!—white bg effect --›

On click Java Script:

Open:

‹a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"›Open‹/a›

Close:

‹a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"›Close‹/a›