遮罩层和弹出层（居中）

最新推荐文章于 2023-02-17 11:48:39 发布

weixin_30415801

最新推荐文章于 2023-02-17 11:48:39 发布

阅读量211

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hanbingljw/p/5045305.html

版权

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

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

转载于:https://www.cnblogs.com/hanbingljw/p/5045305.html

weixin_30415801

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
遮罩层和弹出层（居中）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>居中弹出层</title> </head> <body> <button class="Click">点击</b...
复制链接

扫一扫