网上铺天盖地的纯CSS实现lightbox效果的一点小改动

zend studio 5.5无法打开主界面

js实现的轮换效果图片+简介同步轮换兼容

Large | Medium | Small

gently , Mar/21/16:21 , UI , Comments(2) , Trackbacks(0) , Reads(883) , From Original

lightbox还是很好玩的东西，闲下来的时候就在网上乱翻，发现了超多叫做纯CSS Lightbox效果的，google出来的代码完全一样（说明全是转载，到底是谁转载谁，就不得而知了），号称无JS，如果吹毛求疵的讲，控制那个层显隐的还是JS嘛！(*^_^*偶尔钻下牛角尖）不过还是蛮实用的，除了用js做出的渐显和渐隐，效果几乎是一样的啦！在IE下运行的时候，因为会在右边出现空白边，所以我加了一句body{margin:0}来解决这个问题。好吧，人云亦云一回，以下是那个铺天盖地的代码，我做了一点点改动.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
<title>网上铺天盖地的纯CSS实现lightbox效果的一点小改动</title>
<style type="text/css">
body{
  margin:0;
}  
.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:;" 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:;" 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>

就这些了，不过我还是没有明白z-index最大是多少，以前见到999的，那天看lytebox，居然写到99999的，真的搞不懂这个值的max是多少了！唉，这般家伙