HTML5新标签dialog

HTMl5新的版本出现了一个有意思的标签,是我比较中意的,那就是对话窗或窗口,也就是dialog

1
2
3
4
# 基本用法
<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玩玩吧

1
2
3
4
5
6
7
# 创建一个dialog
<dialog>
<h1>我是一级标题</h1>
<div>我是对话窗口,你已经打开了我!</div>
<button id="close_dialog">关闭</button>
</dialog>
<button id="open_dialog">打开</button>
1
2
3
4
5
6
7
8
9
10
11
12
# 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的元素默认样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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);
}

1
2
3
4
# 重置背景色
dialog::backdrop{
background-color: rgba(0, 0, 0, 0.6)
}

image.png

Demo

MDN链接: