您好,登錄后才能下訂單哦!
這篇文章主要介紹了js模態(tài)對(duì)話框怎么用,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
模態(tài)框(Modal Dialogue Box)也可叫做模態(tài)對(duì)話框,或者對(duì)話框,當(dāng)一個(gè)模態(tài)框被打開時(shí),用戶可以與該對(duì)話框進(jìn)行交互,點(diǎn)擊關(guān)閉按鈕可關(guān)閉該模態(tài)框!
功能實(shí)現(xiàn):
1. 頁(yè)面上有一個(gè)按鈕,用于打開模態(tài)框,模態(tài)框默認(rèn)隱藏;
2. 用戶點(diǎn)擊按鈕,可打開模態(tài)框;用戶點(diǎn)擊模態(tài)框中的關(guān)閉或者點(diǎn)擊頁(yè)面其他地方可關(guān)閉該模態(tài)框
? 點(diǎn)擊頁(yè)面其他地方,關(guān)閉模態(tài)框,可用window.onclick事件
? 給關(guān)閉按鈕綁定點(diǎn)擊事件,按鈕被點(diǎn)擊,模態(tài)框Modal添加樣式display:none;
? 給button按鈕綁定點(diǎn)擊事件,當(dāng)按鈕被點(diǎn)擊時(shí),模態(tài)框Modal添加樣式display:block;
? 先獲取頁(yè)面上的button按鈕,關(guān)閉按鈕,以及模態(tài)框Modal
代碼實(shí)現(xiàn):
<html> <head> <style> /* 彈窗 (background) */ .modal { display: none; /* 默認(rèn)隱藏 */ 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 } /* 添加動(dòng)畫 */ @-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> <h3>彈窗頭部</h3> </div> <div class="modal-body"> <p>彈窗內(nèi)容...</p> <p>彈窗內(nèi)容...</p> </div> <div class="modal-footer"> <h4>彈窗底部</h4> </div> </div> </div> <script> // 獲取彈窗 var modal = document.getElementById('myModal'); // 打開彈窗的按鈕對(duì)象 var btn = document.getElementById("myBtn"); // 獲取 <span> 元素,用于關(guān)閉彈窗 that closes the modal var span = document.getElementsByClassName("close")[0]; // 點(diǎn)擊按鈕打開彈窗 btn.onclick = function() { modal.style.display = "block"; } // 點(diǎn)擊 <span> (x), 關(guān)閉彈窗 span.onclick = function() { modal.style.display = "none"; } // 在用戶點(diǎn)擊其他地方時(shí),關(guān)閉彈窗 window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“js模態(tài)對(duì)話框怎么用”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。