dialog是HTML5新增标签,HTML5新标签dialog

3.png

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

# 基本用法

// somthing ...

open：规定 dialog 元素是活动的，用户可与之交互。

表示这个对话框可以进行互动.

兼容性(本篇文章使用chrome测试)

image.png

image.png

HTMLDialogElement

close()

关闭对话框。 可选传入类型为{domxref("DOMString")}}的参数，用来更新对话框的returnValue。摘自MDN

open()

非模式化的显示这个对话框, 即：打开这个对话框之后依然可以和其他内容进行交互。 可选传入类型为 Element 或者 MouseEvent 的参数，用来定义对话框的显示位置。摘自MDN

showModal()

模式化的显示这个对话框， 并且将会至于所有其他对话框的顶层(屏蔽其他对话框的交互)。 可选传入类型为Element 或者 MouseEvent 的参数， 用来定义对话框的显示位置。摘自MDN

来做一个demo玩玩吧

# 创建一个dialog

我是一级标题

我是对话窗口，你已经打开了我！

关闭

打开

# js代码

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();

}

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链接：