摘要：dialog 是HTML5新增的語義化雙標簽，用于展示一個交互式的模態對話框。它既可以創建模態對話框（用戶不能與打開對話框的頁面進行交互，直到對話框關閉，模態對話帶半透明背景...
dialog 是HTML5新增的語義化雙標簽，用于展示一個交互式的模態對話框。
它既可以創建模態對話框（用戶不能與打開對話框的頁面進行交互，直到對話框關閉，模態對話帶半透明背景遮罩層的對話框，也可以使用 esc鍵 關閉對話框），也可以創建非模態對話框（用戶可以與打開對話框的頁面進行交互，同時也可以與對話框進行交互，只能點擊按鈕關閉對話框，不能使用 esc鍵 關閉對話框）。
一、 基礎結構
<dialog> 是雙標簽，可以在它的頭尾標簽之間自定義對話框內容。如：
<dialog> <h1>這個是對話框的內容</h1> <p> 這是一個簡單的對話框 </p> </dialog>
默認<dialogo> 標簽是不可見的。
要顯示對話框，需要添加 open 屬性。
<dialog open> <h1>這個是對話框的內容</h1> <p> 這是一個簡單的對話框 </p> </dialog>
注意幾個細節：
<dialog> 標簽的顯示與隱藏是通過 display:block/none; 進行操作的。意味著 <dialog> 標簽默認不能進行透明度漸隱變化。
<dialog> 標簽默認是絕對定位的。
<dialog> 標簽自帶有 1em 的 padding 值。
<dialog> 標簽是通過設置 margin:auto 實現的水平居中。
二、JS控制對話框的顯示隱藏
1. show()
非模態化顯示對話框，對其添加open屬性。在非模態化下，不能使用 esc 鍵讓對話框消失。
如：點擊按鈕，顯示對話框。
let btn = document.getElementById("btn");
let myDialog = document.querySelector("#myDialog"); // 獲取對話框標簽
btn.addEventListener("click",function (e) {
myDialog.show();
});2.showModal()
模態化顯示對話框，對其添加open屬性并且顯示遮罩層，同時按ESC鍵可以關閉對話框。
let btn = document.getElementById("btn");
let myDialog = document.querySelector("#myDialog"); // 獲取對話框標簽
btn.addEventListener("click",function (e) {
myDialog.showModal();
});3.close()
關閉對話框
let myDialog = document.querySelector("#myDialog"); // 獲取對話框標簽
myDialog.close();三、CSS樣式控制
/** 非模態化樣式 **/
dialog {
position: fixed;
top: 50%;
left: 50%;
height: 200px;
width: 400px;
margin-top:-100px;
margin-left:-200px;
border: 1px solid #ddd;
border-radius: 2px;
padding: 10px;
box-shadow:1px 1px 50px rgba(0,0,0,.3)
}
/** 模態化樣式 **/
dialog:modal {
padding: 15px;
max-width: calc((100% - 6px) - 2em);
max-height: calc((100% - 6px) - 2em);
border-radius: 2px;
border:1px solid #ddd;
box-shadow:1px 1px 50px rgba(0,0,0,.3)
}
/** 模態化 遮罩層樣式 **/
dialog::backdrop {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.3);
}四、綜合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dialog彈窗</title>
<style>
dialog:modal {
padding: 15px;
max-width: calc((100% - 6px) - 2em);
max-height: calc((100% - 6px) - 2em);
border-radius: 2px;
border: 1px solid #ddd;
box-shadow: 1px 1px 50px rgba(0, 0, 0, .3)
}
dialog::backdrop {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<!-- 彈框 -->
<dialog closeByMask id="dialog">
<p>調查問卷</p>
<form action="" onsubmit="return submitForm(this)">
<div>
姓名：<input type="text" name="name">
</div>
<div>
年齡：<input type="text" name="age">
</div>
<div>
<input type="submit" value="確定">
<button type="button" id="btn-close">關閉</button>
</div>
</form>
</dialog>
<button id="btn-open">打開對話</button>
<script>
var btnOpen = document.querySelector("#btn-open");
var btnClose = document.querySelector("#btn-close");
var dialog = document.querySelector("#dialog");
// 打開彈窗
btnOpen.addEventListener("click", function() {
// dialog.show(); // 非模態彈窗
dialog.showModal(); // 模態彈窗
});
// 關閉彈窗
btnClose.addEventListener("click", function() {
dialog.close();
});
// 表單提交
function submitForm(obj) {
console.log('姓名：', obj.name.value);
console.log('年齡：', obj.age.value);
dialog.close();
return false;
}
// 點擊遮罩層關閉彈窗（如不需要點擊遮罩層關閉，可以刪除）
function closeDialog(event) {
if (event.target === dialog) {
dialog.close();
}
}
// 點擊遮罩層關閉彈窗（如不需要點擊遮罩層關閉，可以刪除）
dialog.addEventListener("click", closeDialog);
</script>
</body>
</html>
