溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了js模態對話框怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
模態框（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>
<h3>彈窗頭部</h3>
</div>
<div class="modal-body">
<p>彈窗內容...</p>
<p>彈窗內容...</p>
</div>
<div class="modal-footer">
<h4>彈窗底部</h4>
</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>感謝你能夠認真閱讀完這篇文章，希望小編分享的“js模態對話框怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
