🤯 无需任何 CSS 代码即可创建模态框 🤯

介绍

HTML 5.2 为我们带来了 <div>dialog元素！🙌

目前只有 Chrome 浏览器实现了这项功能，但如果其他浏览器厂商想要完全兼容 HTML，肯定也会跟进。（Firefox 浏览器已经通过一个标志位启用了这项功能。）此外，还有一个对应的polyfill。

现在让我们来仔细研究一下这个相对较新且引人注目的HTML元素。🔬

在下面的 Codepen 示例中，我创建了一个功能齐全的模态框，而且没有编写任何 CSS 代码。🤓

那么，这一切是如何运作的呢？

其实很简单。我们只需要使用这个dialog元素，并添加一个open属性来显示它（默认情况下它是隐藏的）。我们可以使用showModalHTMLDialogElement 提供的方法来切换该属性的显示和隐藏状态。调用该close方法即可将其关闭。

const modal = document.querySelector('#modal')
modal.showModal() // opens the modal
modal.close() // closes the modal

dialog您可以注意到该元素会自动为我们完成一些很棒的事情：

通过method="dialog"在表单标签中添加以下内容：

在上面的 Codepen 示例中，两个按钮都会触发模态框的关闭。模态框关闭时会触发一个close事件。在我们的示例中，modal.returnValue 将包含“yes”或“no”（如果用户按下 [escape] 键，则为空字符串）。

modal.addEventListener('close', () => {
    console.log(modal.returnValue) // In our case: 'yes', 'no' or ''
})

对话框元素自带默认的用户代理样式表，但可以完全自定义。您甚至可以按以下方式更改模态框的背景：

#modal::backdrop {
    background-color: rgba(0, 0, 0, 0.4)
}