HTML5中dialog元素的细致解说（代码示例）-
对话框（别称模态框，浮层）是web项目中用于会员交互的重要局部，我们最常见的就是js中 alert()，confirm()，但是这个对话框的不雅观，也不克不及自定义样式，所以在开发的历程中，个别依据本人本人的需求造轮子或者运用第三方的。
对话框的组成
常见的弹出框情势：
位置：屏幕的左上角，右上角，左下角，右下角，垂直居中等
大小：定宽定高，定宽不定高，不定宽不定高档
开发中的对话框情势就是位置和大小随机组合的一种状况。
但是有一种状况（不定宽高的垂直居中）不易实现（可以运用display:table或css3的translate或flex实现），概括可参照 水平垂直居中布局
上面的对话框包括内容的容器，还有一个是对话框下面的遮罩层（mask），遮罩层是会员触发弹出框后，构成的一个对话框与页面主体的分割图层，它的存在可以给会员一个更显明的视觉差结果，同时也起到以免会员触发对话框后的其他无须要的页面主体操纵，从而发生更有的会员体验。
存在题目
虽然，有许多对话框的轮子供我们选中，但是我们面对着许许多多的题目。
到底选中哪一种对话框（关于有选中综合症的人来说一个头疼的题目）
可用性（api的简略与否，可否依赖了其他第三方的库）
可扩展性
阅读器的兼容性支撑
那么，有没有一个简略的办法来做做一个对话框呢？固然有，我们可以运用HTML5的 dialog 元素。
HTML5(dialog)
很简略，我们运用上面的代码就可以做一个弹出内容为‘Hello world.’ 的对话框。
控制对话框的显示/隐蔽也很容易，增加 open 属性表示显示，去掉为隐蔽。固然，我们也可以通过DOM接口来控制 dialog 的显隐(show(), close())
对话框下面的遮罩层，我们可以运用 ::backgrop 伪元素，而它的激活，我们需要运用 showModal() 这个DOM的API，::backgrop 的特性是它的位置在dialog之下，在任何 z-index 之上。
运用 showModal() 不仅可以让遮罩层显示，dialog容器也显示，所以用到 ::backdrop 的时候，可以用 showModal() 取代 show() 这个API；要是按键盘 ESC 键将关闭弹出层，固然你一可以运用 close() 这个DOM API。
我们可以设定 ::backdrop 这个图层为半透亮图层，代码如下：
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.75);
}除了我们常见的提醒信息的弹出层外，还有一类比拼运用的是带表单的弹出层。
带表单的弹出层
我们可以运用HTML5的dialog元素联合form元从来做这些弹出层吗？
答:可以
我们怎么做才干让form元素和dialog元素慎密的联合起来呢？
答：我们只需要在dialog元素中增加 method="dialog" 这个属性即可，这样就可以将button元素的属性 value 的值通报给dialog元素。
《script》
var dialog = document.querySelector('dialog')
dialog.showModal()
dialog.addEventListener('close', function(event) {
console.log(dialog.returnValue)
})
《script》demo
var dialog = document.querySelector('dialog')
dialog.showModal()
dialog.addEventListener('close', function(event) {
alert(dialog.returnValue)
})dialog::backdrop { background: rgba(0, 0, 0, 0.6)
}阅读器兼容性
虽然，这是一个比拼好用的HTML5，但是还存在兼容性题目，chrome和opera支撑的比拼好，Firefox中是实验特性，但是IE，Edge, safari支撑的欠好，ios不支撑，Android也支撑的不足好，只要Android6今后支撑。概括可参照 caniuse
那么，能不克不及让旧版本的阅读器支撑HTML5的dialog呢？第一，我们想到的是有没有一个支撑dialog的polyfill，就像支撑es6新特性的babel-polyfill同样，的确有这样一个开源项目a11y-dialog，它离别供给了vue和react的不一样版本。
以上就是HTML5中dialog元素的细致解说（代码示例）的细致内容，更多请关注 百分百源码网 其它相干文章！
