实现lightbox效果

lightbox效果（点击下面的图片！）：

lobster

 

实现这个lightbox的原理很简单：添加一个div层用来显示黑色透明的那个覆盖层（用z-index来实现）；再添加一个div层，用来显示中间要显示的内容（也是用z-index来实现，不过这个值要比覆盖层的大）。代码很简单，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>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: 50%;
            left: 50%;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>
</head>

<body>
  <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://img3.douban.com/img/fmadmin/chlBanner/14790.jpg" alt="lobster" width="100" height="100" /></a>
        <div id="light" class="white_content">
        <img src="http://img3.douban.com/img/fmadmin/chlBanner/14790.jpg" alt="lobster" style="width:200px;height:200px;" />
       </div>
        <div id="fade" class="black_overlay">
         <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" style="position:absolute;left:65%;top:45%;color:red;">Close</a>
        </div>
</body>
</html>

 

posted @ 2013-03-30 22:29  Joy Ho  阅读(214)  评论(0)  编辑  收藏  举报