摘要：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>
