纯CSS制作的网页中的lightbox效果

　2007-10-29 19:23:21　来源：WEB开发网　闂傚倸鍊风欢姘缚瑜嶈灋闁圭虎鍠栫粻顖炴煥閻曞倹瀚�

闂傚倸鍊风粈渚€骞夐敓鐘插瀭闁汇垹鐏氬畷鏌ユ煙閹殿喖顣奸柛搴＄У閵囧嫰骞掗幋婵冨亾閻㈢ǹ纾婚柟鐐灱濡插牊绻涢崱妤冃℃繛宀婁簽缁辨捇宕掑鎵佹瀸闂佺懓鍤栭幏锟�

濠电姷鏁告慨顓㈠箯閸愵喖宸濇い鎾寸箘閹规洟姊绘笟鈧ḿ褍煤閵堝悿娲Ω閳轰胶鍔﹀銈嗗笂閼冲爼鍩婇弴銏＄厪闁搞儮鏅涙禒褏绱掓潏鈺佷槐闁轰焦鎹囬弫鎾绘晸閿燂拷闂傚倸鍊风欢姘缚瑜嶈灋闁圭虎鍠栫粻顖炴煥閻曞倹瀚�　　闂傚倸鍊烽懗鑸电仚缂備胶绮〃鍛村煝瀹ュ鍗抽柕蹇曞У閻庮剟姊虹紒妯哄闁圭⒈鍋嗛惀顏囶樄闁哄本娲樼换婵婄疀閺囩姷鐛ラ梻浣哄帶婢瑰﹥绂嶅⿰鍫氣偓鏃堝礃椤忎礁浜鹃柨婵嗛婢ь喖霉閻樻瑥瀚粻楣冩煕椤愩倕鏋庨柣蹇嬪劜閵囧嫰寮村Ο鍝勫Е濡炪們鍨洪悷鈺呭箖閳╁啯鍎熼柕鍥у簻閹凤拷

核心提示：“Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口，纯CSS制作的网页中的lightbox效果，lightbox效果网络上有很多js版本的介绍，不过都下载一个lightbox的js小则几十K，大则上百K，如果你只是需要一个类似Lightbox的效果

“Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口。lightbox效果网络上有很多js版本的介绍。不过都下载一个lightbox的js小则几十K，大则上百K。如果你只是需要一个类似Lightbox的效果，这种百分之百纯CSS制造，不含js的办法倒是可以试试。

以下是引用片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
　 <head>
　　　 <title>纯CSS Lightbox效果</title>
　　　 <style>
　　　 .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: 25%;
　　　　　 left: 25%;
　　　　　 width: 50%;
　　　　　 height: 50%;
　　　　　 padding: 16px;
　　　　　 border: 16px solid orange;
　　　　　 background-color: white;
　　　　　 z-index:1002;
　　　　　 overflow: auto;
　　　 }
　 </style>
　 </head>
　 <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>
</html>