对话框（又称模态框、浮层）是web项目中用户交互的重要组成部分。我们看到最多的就是js中的alert()和confirm()，但是这个对话框不美观，而且不能自定义样式，所以在开发过程中，一般都是根据自己的需要造轮子或者使用第三方的。常见的弹出框形式：位置：左上角、右上角、左下角、右下角、垂直居中中等大小：固定宽高、固定宽高、可变宽高等。开发中的对话框Form是一种位置和大小随意组合的情况。但是有一种情况（垂直居中，宽高可变）不好实现（可以用display:table或者css3的translate或者flex），具体请参考包含对话框内容的容器水平和垂直居中布局上方的box，还有一个是dialog框下方的遮罩层（mask），遮罩层是用户触发pop后形成的对话框与页面主体之间的分隔层-up框，它的存在可以给用户带来更明显的视觉差异效果，同时也起到了避免用户触发对话框后进行其他不必要的页体操作的作用，从而获得更好的用户体验。虽然有问题，有很多对话轮可供我们选择，但我们面临着各种各样的问题。选择哪个对话框（选择综合症的人很头疼）可用性（是否简单API，是否依赖其他第三方库）扩展性浏览器兼容性支持那么，有没有一种简单的方法可以将其作为对话框来实现？当然，我们可以使用HTML5对话框元素。HTML5(dialog)Helloworld.
很简单，我们可以用上面的代码做一个弹出对话框，内容为‘Helloworld.’。也很容易控制对话框的显示/隐藏。添加open属性表示显示，去掉表示隐藏。当然我们也可以通过DOM接口来控制对话框的可见性（show(),close()）。我们可以使用::backgrop伪元素，为了激活它，我们需要使用showModal()DOMAPI，::backgrop的特点是它位于对话框下方，任何z-index上方。使用showModal()不仅可以显示遮罩层，还可以显示对话框容器，所以在使用::backdrop时，可以使用showModal()代替show()API；如果你按下键盘上的ESC键，弹出层将被关闭，当然你可以使用close()DOMAPI。我们可以设置::backdrop为半透明层，代码如下：dialog::backdrop{background-color:rgba(0,0,0,0.75);}除了我们常见提示的弹出层信息，另一种比较是使用带有表单的弹出层。带表单的弹出窗口我们可以使用HTML5对话框元素结合表单元素来制作这些弹出窗口吗？答：我们可以做些什么来使表单元素和对话框元素紧密结合？答：我们只需要给dialog元素加上method="dialog"属性，这样就可以将button元素的属性值的值传递给dialog元素了。demo浏览器兼容性虽然这是一个比较好用的HTML5，但是仍然存在兼容性问题。Chrome和Opera支持更好。Firefox是一个实验性功能，但是IE、Edge、safari支持不好，ios不支持，Android支持不够好，只有Android6及以后支持。详情请参考caniuse。那么，旧浏览器能否支持HTML5对话框？首先我们想到的是有没有支持dialog的polyfill，就像支持es6新特性的babel-polyfill。确实有这样一个开源项目a11y-dialog，分别提供了不同版本的vue和react。更多系列文章请关注我的github
