HTML5.2 新增了 <dialog> 元素，用以支持原生的 Modal 窗口，对于前端开发而言，使用它十分的简单方便。
基本使用
新建一个 <dialog> 元素
<dialog open> native dialog
</dialog>open 属性用以控制元素的显示，如果不添加，元素不会显示，但你也可以用 js 去控制其显示隐藏。
在没有添加任何样式的情况下，元素的外观是这样的：
它会绝对定位于页面中，层级在其他元素之上，并且居中，其宽高也会根据内容自适应。
const dialog = document.querySelector('dialog');
//显示元素，添加 open 属性，允许背景交互
dialog.show();
//显示元素，添加 open 属性，禁止背景交互
dialog.showModal();
//隐藏元素，删除 open 属性
dialog.close();<dialog> 元素提供三个交互方法：
-
HTMLDialogElement.close() -
HTMLDialogElement.show() -
HTMLDialogElement.showModal()
close() 用于隐藏元素，show() 和 showModal() 都可以显示元素，但当你使用 showModal() 来显示<dialog> 元素时，会在页面中添加一个背景层，该背景层会阻止用户与<dialog> 元素之外的部分进行交互，在默认情况下，这个背景层是透明的，我们可以通过 css 去改变背景层的样式。
样式
<dialog> 元素的样式的设置和其他元素一样，背景层需要使用的新的::backdrop伪元素来修改。
dialog {
border: 3px solid #eee;
border-radius: 5px;
}
dialog::backdrop {
/* 背景层样式 */
background-color: rgba(0, 0, 0, 0.4);
}
交互
对话框的一个重要功能就是通过与用户交互得到相应的反馈，在关闭 <dialog> 元素时，可以将字符串传递给 close() 方法，该值将会分配给该元素的 returnValue 属性中，你可以在其他地方去获取它。
dialog.close('test');
console.log(dialog.returnValue); // test
你也可以监听该元素的事件，其中用处较大的有 close（当对话框关闭时触发）和 cancel （按esc键触发）。
兼容性
<dialog> 元素的兼容性还不大尽如人意，毕竟是刚增加的元素，不过已经有了针对该元素的 polyfill (https://github.com/GoogleChrome/dialog-polyfill) ，使用该 polyfill 可以兼容到 ie9+， 感兴趣的话可以使用起来。
本篇文章来源于微信公众号: TripDesign
