【html/css】模态框的实现

最新推荐文章于 2023-09-19 16:14:13 发布

weixin_30565327

最新推荐文章于 2023-09-19 16:14:13 发布

阅读量138

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/daihere1993/p/5070281.html

版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>modaldemo</title>
    <style media="screen">
      #modal-overlay {
           visibility: hidden;
           position: absolute;   /* 使用绝对定位或固定定位  */
           left: 0px;
           top: 0px;
           width:100%;
           height:100%;
           text-align:center;
           z-index: 1000;
           background-color: #333;
           opacity: 0.5;   /* 背景半透明 */
      }
      /* 模态框样式 */
      .modal-data{
           width:300px;
           margin: 100px auto;
           background-color: #fff;
           border:1px solid #000;
           padding:15px;
           text-align:center;
      }
    </style>
  </head>
  <body style="position: relative">
    <div style="width: 600px; height: 600px;">
      <div id="modal-overlay">
        <div class="modal-data">
          <p>一个简单的模态框。</p>
          <p>点击 <a href="#" οnclick="overlay()">这里</a>关闭</p>
        </div>
      </div>
    </div>


    <a href="#" οnclick="overlay()">显示对话模态框</a>

    <script type="text/javascript">
      function overlay () {
        var e1 = document.getElementById('modal-overlay');
        e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";
      }

    </script>
  </body>
</html>

注意：#modal-overlay 一定要是相对body来设置绝对定位。若是不给body设置position，#modal-overlay 就是相对html设置了绝对定位，当html页面太高或者太宽而出现滚动条的时候，#modal-overlay 就没有覆盖整个页面的效果了。

转载于:https://www.cnblogs.com/daihere1993/p/5070281.html

weixin_30565327

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫