遮罩层和弹出层（居中） 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>居中弹出层</title>
  </head>
  <body>
    <button class="Click">点击</button>
      <style>
        body{margin:0;padding:0;}
        .popWrap{position:absolute;top:0;width:100%;height:100%;display:none;}//脱离文档流
        .mask{position: absolute;top:0;width:100%;height:100%;background-color:gray;opacity:0.5;}
        .popContent{position:fixed;top:50%;left:50%;margin-left:-200px;margin-top:-150px;width:400px;height:300px;background-color:white;}//fixed是关键
      </style>
      <div class="popWrap">
        <div class="mask"></div>
        <div class="popContent">
        </div>
      </div>
      <script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
      <script>
          $(function(){
               var Height = $(document).height();
               $(".mask").css({"height":Height+"px"});//满屏遮罩

              $(".Click").on("click",function(){
                  $(".popWrap").css({"display":"block"});
              });
              $(".mask").on("click",function(){
                  $(".popWrap").css({"display":"none"});
              });
          });
      </script>

  </body>
</html>

主要实现：满屏遮罩和弹出层随滚动条滚动而居中；

posted @ 2015-12-14 15:08  奋力向前CO  阅读(574)  评论(0)  编辑  收藏  举报