英文原文地址：http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
网络上有很多js版本的lightbox效果介绍。不过都下载一个lightbox的js小则几十K，大则上百K。如果你只是需要一个类似Lightbox的效果，这种百分之百纯CSS制造，不含js的办法到可以试试。
到这里预览效果(下载)：http://5key.net/lab/lightbox-withoutjs
CSS部分：
<style>
body{font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif;}
a{color:#000; text-decoration:none;}
.img{border:0px;}
.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: 25%;
width: 632px;
height: 445px;
border: 16px solid #FFF;
border-bottom:none;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
HTML部分：
<body>
<p>This is the main content. To display a lightbox click <a href = ”javascript:void(0)” onclick = ”document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’”>here</a></p>
<div id=”light” class=”white_content”>This is the lightbox content. <a href = ”javascript:void(0)” onclick = ”document.getElementById(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none’”>Close</a></div>
<div id=”fade” class=”black_overlay”></div>
</body>
当然，这里无法实现JS版的lightbox中圆滑展开图片的样式。如果你还是偏好JS版，可以到这里看看。
不错耶～收进～ [lol]
呵呵….离Lightbox的效果还是有一定距离的。
突然提醒了我，赶紧去备份数据库……
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"
这不是javascript???
这不是javascript???
只能说相对与而言，不需要外部的js了
html里有javascript了啊。。
外部内部都是javascript。。还是外部好。
哈哈,没啥改变.而且感觉作者的方法更笨了>>>
这样还有分离吗?
把js嵌入页面,还叫无js?
"作者的方法更笨了".确实是相当的笨.