日期:2014-04-08  浏览次数:21212 次

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

以下是援用片段:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
  <head>
    <title>纯CSSLightbox效果</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:16pxsolidorange;
      background-color:white;
      z-index:1002;
      overflow:auto;
    }
  </style>
  </head>
  <body>
    <p>Thisisthemaincontent.Todisplayalightboxclick<ahref="javascript:void(0)"onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
    <divid="light"class="white_content">Thisisthelightboxcontent.<ahref="javascript:void(0)"onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    <divid="fade"class="black_overlay"></div>
  </body>
</html>