3.png
HTMl5新的版本出现了一个有意思的标签，是我比较中意的，那就是对话窗或窗口，也就是dialog
# 基本用法
<dialog open>
// somthing ...
</dialog>
open：规定 dialog 元素是活动的，用户可与之交互。
表示这个对话框可以进行互动.
兼容性(本篇文章使用chrome测试)
image.png
image.png
HTMLDialogElement
- close()
关闭对话框。 可选传入类型为{domxref("DOMString")}}的参数，用来更新对话框的returnValue。
摘自MDN
- open()
非模式化的显示这个对话框, 即：打开这个对话框之后依然可以和其他内容进行交互。 可选传入类型为
Element或者MouseEvent的参数，用来定义对话框的显示位置。摘自MDN
- showModal()
模式化的显示这个对话框， 并且将会至于所有其他对话框的顶层（屏蔽其他对话框的交互）。 可选传入类型为
Element或者MouseEvent的参数， 用来定义对话框的显示位置。摘自MDN
来做一个demo玩玩吧
# 创建一个dialog
<dialog>
<h1>我是一级标题</h1>
<div>我是对话窗口，你已经打开了我！</div>
<button id="close_dialog">关闭</button>
</dialog>
<button id="open_dialog">打开</button>
# js代码
<script>
var dialog = document.getElementsByTagName("dialog")[0],
openDialog = document.getElementById("open_dialog"),
closeDialog = document.getElementById("close_dialog");
openDialog.onclick = function(){
dialog.showModal();// 或者show(),这是有区别的
}
closeDialog.onclick = function(){
dialog.close();
}
</script>
show()和showModal() 是有区别的，show只是显示dialog,而showMadal()是会屏蔽其他的弹出层
按ESC可以关闭dialog，dialog需要重新定义css样式，毕竟本身css是默认的样式
我们先来看看dialog的元素默认样式：
dialog:not([open]) { // 显示的时候
display: none;
}
dialog {
display: block;
position: absolute;
left: 0px;
right: 0px;
width: -webkit-fit-content;
height: -webkit-fit-content;
color: black;
margin: auto;
border-width: initial;
border-style: solid;
border-color: initial;
border-image: initial;
padding: 1em;
background: white;
}
dialog::backdrop {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.1);
}
# 重置背景色
dialog::backdrop{
background-color: rgba(0, 0, 0, 0.6)
}
image.png
MDN链接：
