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

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

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

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

功能實現(xiàn)：

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

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

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

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

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

✦ 先獲取頁面上的button按鈕，關閉按鈕，以及模態(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); 
    } 
 
    /* 彈窗內容 */ 
    .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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JSP基于Bootstrap分頁顯示實例解析
這篇文章主要為大家詳細介紹了JSP基于Bootstrap分頁顯示實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06
JScript|Event]面向事件驅動的編程(二)--實例講解:將span模擬成超連接
JScript|Event]面向事件驅動的編程(二)--實例講解:將span模擬成超連接...
2007-01-01
js實現(xiàn)透明度漸變效果的方法
這篇文章主要介紹了js實現(xiàn)透明度漸變效果的方法,涉及javascript實現(xiàn)漸變效果的技巧,非常具有實用價值,需要的朋友可以參考下
2015-04-04
js function使用心得
js function使用心得，對于面向對象的學習都是不錯的參考資料。
2010-05-05
JavaScript裝飾器的實現(xiàn)原理詳解
最近在使用TS+Vue的開發(fā)模式，發(fā)現(xiàn)項目中大量使用了裝飾器，看得我手足無措，今天特意研究一下實現(xiàn)原理，方便自己理解這塊知識點，有需要的小伙伴也可以參考一下
2022-10-10
JS本地刷新返回上一頁代碼
返回上一頁并刷新在此功能有利于用戶的體驗,是每一個web開發(fā)人員所必備的一項，這篇文章主要介紹了JS本地刷新返回上一頁代碼，感興趣的小伙伴們可以參考一下
2016-07-07
javascript實現(xiàn)json頁面分頁實例代碼
這篇文章主要介紹了javascript實現(xiàn)json頁面分頁實例代碼,需要的朋友可以參考下
2014-02-02
javascript實現(xiàn)查找數(shù)組中最大值方法匯總
本文給大家匯總了一下使用javascript實現(xiàn)查找數(shù)組中最大最小值的一些方法，非常的簡單實用，有需要的小伙伴可以來參考下。
2016-02-02
javascript禁用Tab鍵腳本實例
這篇文章主要介紹了javascript禁用Tab鍵的腳本實例，很實用，大家參考使用吧
2013-11-11
input+select(multiple) 實現(xiàn)下拉框輸入值
昨天做一個網站時，需要實現(xiàn)下拉框能夠輸入，從功能上講是要實現(xiàn)用戶在文本框輸入值時，能夠從后讀出數(shù)據(jù)彈出下拉選項
2009-05-05