本文首发于「妙蛙种子前端博客」，欢迎关注～
HTML5的 dialog 元素可以快速实现一个带有遮罩层的弹窗，效果与el-dialog类似。
dialog 属性
HTML5 dialog 标签除了支持常规的全局属性外（id、class、data-* 等），还有一个自身特有的属性：open。
open 属性标识该 dialog 的状态是显示还是隐藏， dialog 上没有该属性时弹窗是隐藏的。所以我们可以动态控制 dialog 的open属性切换弹窗的显示和隐藏。
当然更多时候我们是直接获取
dialog对象，通过事件的形式控制弹窗的显示和隐藏。
dialog 样式
- dialog 元素自身的样式：可以控制
dialog的背景颜色、边框、位置等。 - dialog::backdrop，当
dialog激活并且显示遮罩层的时候，控制遮罩层的样式。
如下样式效果：
dialog {
top: 130px;
width: 400px;
height: 220px;
border: 1px solid red;
border-radius: 8px;
}
dialog::backdrop {
background-color: rgba(126, 201, 236, 0.6);
}
dialog 事件
TypeScript中，可使用 HTMLDialogElement 来定义 dialog 类型，元素事件：
- HTMLDialogElement.close()：关闭弹窗
- HTMLDialogElement.show()：显示弹窗
- HTMLDialogElement.showModal()：显示遮罩层
DEMO
DEMO包含 HTML5 dialog 标签的使用，打开、关闭、显示遮罩层、样式控制等内容。
兼容性
从 Can I use 中可以看到，除了已经快被淘汰的IE系列外，别的浏览器都在近期的版本中慢慢适配了 dialog 标签，相信在不久的将来这些html5的新特性会被慢慢的普及开来。
当然你还有另一个选择，那就是使用 polyfill ：github.com/GoogleChrom…
交个朋友吧
交个朋友，关注 「妙蛙种子前端」 公众号吧！
妙蛙种子前端是一个记录/分享WEB前端技术相关的前端公众号，始于前端又不止于前端，包括但不限于前沿互联网只是、学习笔记、认知提升等内容。
