js模态对话框使用方法详解

模态框（Modal  Dialogue Box）也可叫做模态对话框，或者对话框，当一个模态框被打开时，用户可以与该对话框进行交互，点击关闭按钮可关闭该模态框！

功能实现：

1. 页面上有一个按钮，用于打开模态框，模态框默认隐藏；

2. 用户点击按钮，可打开模态框；用户点击模态框中的关闭或者点击页面其他地方可关闭该模态框

✦  点击页面其他地方，关闭模态框，可用window.onclick事件

✦  给关闭按钮绑定点击事件，按钮被点击，模态框Modal添加样式display：none;

✦  给button按钮绑定点击事件，当按钮被点击时，模态框Modal添加样式display:block;

✦  先获取页面上的button按钮，关闭按钮，以及模态框Modal

代码实现：

<html>
<head>
  <style>
    /* 弹窗 (background) */
    .modal {
      display: none; /* 默认隐藏 */
      position: fixed;
      z-index: 1;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.4);
    } 

    /* 弹窗内容 */
    .modal-content {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      border: 1px solid #888;
      width: 35%;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 0.4s;
      animation-name: animatetop;
      animation-duration: 0.4s
    } 

    /* 添加动画 */
    @-webkit-keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
    } 

    @keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
    } 

    /* 关闭按钮 */
    .close {
      color: white;
      float: right;
      font-size: 28px;
      font-weight: bold;
    } 

    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    } 

    .modal-header {
      padding: 2px 16px;
      background-color: #5587A2;
      color: white;
    } 

    .modal-body {padding: 2px 16px;} 

    .modal-footer {
      padding: 2px 16px;
      background-color: #5587A2;
      text-align: right;
      color: white;
    }
  </style>
</head>
<body>
  <!-- 打开弹窗按钮 -->
  <button id="myBtn">打开弹窗</button> 

  <!-- 弹窗 -->
  <div id="myModal" class="modal"> 

    <!-- 弹窗内容 -->
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">×</span>
        <h2>弹窗头部</h2>
      </div>
      <div class="modal-body">
        <p>弹窗内容...</p>
        <p>弹窗内容...</p>
      </div>
      <div class="modal-footer">
        <h3>弹窗底部</h3>
      </div>
    </div> 

  </div>
  <script>
    // 获取弹窗
    var modal = document.getElementById('myModal'); 

    // 打开弹窗的按钮对象
    var btn = document.getElementById("myBtn"); 

    // 获取 <span> 元素，用于关闭弹窗 that closes the modal
    var span = document.getElementsByClassName("close")[0]; 

    // 点击按钮打开弹窗
    btn.onclick = function() {
      modal.style.display = "block";
    } 

    // 点击 <span> (x), 关闭弹窗
    span.onclick = function() {
      modal.style.display = "none";
    } 

    // 在用户点击其他地方时，关闭弹窗
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。