一起来看 HTML 5.2 中新的原生元素

原文地址：Meet the New Dialog Element
作者：Keith

不到一个月前， HTML 5.2 正式成为 W3C 的推荐标准（ REC）,其中，推出了一个新的原生模态对话框元素

，乍一看，可能感觉它就是一个新增的元素，然而，作者最近在玩的时候，发现它确实是一个值得期待和很有意思的元素，在这里分享给大家

这是 最基础的示例

    Native dialog box!

其中，open 属性表示此时 dialog 是可见的，如果没有 open，dialog 将会隐藏，你可以使用 JavaScipt 将它显现出来，此时，dialog 渲染如下

它 绝对定位 于页面之上，就如我们期望的一样，出现在内容的上方，并且 水平居中，默认情况下，它 和内容一样宽

基本操作

JavaScipt 有几个 方法 和 属性 可以很方便地处理 dialog 元素，使用最多的可能还是 showModal() 和 close()

const modal = document.querySelector('dialog');

// makes modal appear (adds `open` attribute)
modal.showModal();

// hides modal (removes `open` attribute)
modal.close();

当你使用 showModal() 来打开 dialog 时，将会在 dialog 周围加一层阴影，阻止用户与 非 diglog 元素的交互，默认情况下，阴影是 完全透明 的，你可以使用 CSS 来修改它

按 Esc 可以关闭 dialog，你也可以提供一个按钮来触发 close()

还有一个方法是 show()，它也可以让 dialog 显现，但与 showModal() 不同的是它没有阴影，用户可以与非 dialog 元素进行交互

浏览器支持和 Polyfill

目前，只有 chrome 支持

，Firefox 需要在 about:config 里允许 dom.dialog_element.enabled 才能正常使用，我猜想，Firefox 在不久的将来就会支持

上图为 caniuse.com 关于 dialog 特性主流浏览器的兼容情况

幸运的是，我们可以使用 dialog-polyfill 来缓解这种尴尬，它既提供了 JavaScript 的行为，也包含了默认的样式，我们可以使用 npm 来安装它，也可以使用