纯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>