亲宝软件园·资讯

展开

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

Sunshine_Lisa 人气:0

模态框(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>

加载全部内容

相关教程
猜你喜欢
用户评论