js模態(tài)對話框使用方法詳解

更新時間：2017年02月16日 10:57:04 作者：Sunshine_Lisa

這篇文章主要為大家詳細介紹了js模態(tài)對話框的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

模態(tài)框（Modal Dialogue Box）也可叫做模態(tài)對話框，或者對話框，當一個模態(tài)框被打開時，用戶可以與該對話框進行交互，點擊關(guān)閉按鈕可關(guān)閉該模態(tài)框！

功能實現(xiàn)：

1. 頁面上有一個按鈕，用于打開模態(tài)框，模態(tài)框默認隱藏；

2. 用戶點擊按鈕，可打開模態(tài)框；用戶點擊模態(tài)框中的關(guān)閉或者點擊頁面其他地方可關(guān)閉該模態(tài)框

✦ 點擊頁面其他地方，關(guān)閉模態(tài)框，可用window.onclick事件

✦ 給關(guān)閉按鈕綁定點擊事件，按鈕被點擊，模態(tài)框Modal添加樣式display：none;

✦ 給button按鈕綁定點擊事件，當按鈕被點擊時，模態(tài)框Modal添加樣式display:block;

✦ 先獲取頁面上的button按鈕，關(guān)閉按鈕，以及模態(tài)框Modal

代碼實現(xiàn)：

<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); 
    } 
 
    /* 彈窗內(nèi)容 */ 
    .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} 
    } 
 
    /* 關(guān)閉按鈕 */ 
    .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"> 
 
    <!-- 彈窗內(nèi)容 --> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <span class="close">×</span> 
        <h2>彈窗頭部</h2> 
      </div> 
      <div class="modal-body"> 
        <p>彈窗內(nèi)容...</p> 
        <p>彈窗內(nèi)容...</p> 
      </div> 
      <div class="modal-footer"> 
        <h3>彈窗底部</h3> 
      </div> 
    </div> 
 
  </div> 
  <script> 
    // 獲取彈窗 
    var modal = document.getElementById('myModal'); 
 
    // 打開彈窗的按鈕對象 
    var btn = document.getElementById("myBtn"); 
 
    // 獲取 <span> 元素，用于關(guān)閉彈窗 that closes the modal 
    var span = document.getElementsByClassName("close")[0]; 
 
    // 點擊按鈕打開彈窗 
    btn.onclick = function() { 
      modal.style.display = "block"; 
    } 
 
    // 點擊 <span> (x), 關(guān)閉彈窗 
    span.onclick = function() { 
      modal.style.display = "none"; 
    } 
 
    // 在用戶點擊其他地方時，關(guān)閉彈窗 
    window.onclick = function(event) { 
      if (event.target == modal) { 
        modal.style.display = "none"; 
      } 
    } 
  </script> 
</body> 
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: