模態框（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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
