【html/css】模态框的实现

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


    <a href="#" onclick="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 就没有覆盖整个页面的效果了。

【html/css】模态框的实现

相关推荐