dialog

基本用法

<dialog>标签表示一个可以关闭的对话框，当 <dialog> 元素添加了 open 属性之后，浏览器会将该元素的 display 重置为 block ，即：

/* dialog 打开状态 */
dialog[open] {
    display: block;
}

/* dialog 关闭状态 */
dialog:not(open) {
    display: none;
}

<dialog> 元素提供了以下几个 API 控制其显隐状态：

方法	定位	可否交互	更多说明
`showModal`	fixed	阻止用户与其他内容交互	模态对话框：拥有==:modal==选择器，可以通过`dialog:modal`匹配会添加了一个 `::backdrop` 伪元素来覆盖 `<dialog>` 元素之外的内容
`show`	absolute	不阻止	非模态对话框可以用过 `dialog:not(:modal)` 匹配没有 `::backdrop` 伪元素
`close`	-	-	关闭对话框，另外可以使用键盘上的 `Esc` 键直接关闭对话框

事件：

事件	说明
`close`	对话框关闭时触发
`cancel`	用户按下`esc`键关闭对话框时触发注意因为会触发对话框关闭，所以后来还会触发 close 事件

可读属性：

属性	说明
`returnValue`	`close` 方法可以接受一个字符串作为参数，用于传递信息。传递的信息可以通过此属性读取

在 <dialog> 元素中可以内置一个 method 为 dialog 的表单元素（<form>）

它与传统的 <form> 有所不同，使用 <form method="dialog"> 会导致表单提交关闭对话框并将 returnValue 属性设置为提交按钮的值。这可以避免编写自定义代码，同时为 Web 页面提供正确的语义