摘要： HTML5.2加入了一个新的元素dialog，表示一个对话框或其他交互式组件，书写的时候不能省略结束标签。API很简单用起来也非常顺手。 Usage
老王又有时间可以陪女朋友看电影了
Attributes 此标签包含所有全局属性，除了tabIndex open 该open属性意味着该对话框是可见的。HTML5.2加入了一个新的元素dialog，表示一个对话框或其他交互式组件，书写的时候不能省略结束标签。API很简单用起来也非常顺手。
Usage
老王又有时间可以陪女朋友看电影了
Attributes
此标签包含所有全局属性，除了tabIndex
open
该open属性意味着该对话框是可见的。没有它，这个对话框就会隐藏起来，直到你使用JavaScript来显示它。添加任何样式之前，对话框呈现如下默认样式：
默认水平居中，宽高适配文字内容
JavaScript有几个方法和属性可以使dialog 元素容易处理。你可能最需要的三种方法是showModal()，show()和close()。
constmodal =document.querySelector('dialog');modal.showModal();modal.close();
showModal()会添加open属性即打开对话框。
show()和showModal一样打开对话框，但是有区别在于show方法的打开的模态框是没有背景遮罩的。showModal的方式打开会有一个透明的遮罩层，且这个遮罩层可以通过::backdrop设置样式的。
close()则会删除open属性即隐藏，close是可以传参的像这样：modal.close('some return value')。传入的值可以通过modal.returnValue获取。
当然还有可以用的事件close。
close: 当modal关闭的时候触发
cancel: 当按下ESC关闭模态框的时候触发
// display returnValuemodal.addEventListener('close', () => { returnSpan.innerHTML = modal.returnValue;});// escmodal.addEventListener('cancel', () => {// something});
notes:
通过::backdrop伪元素可以为背景遮罩设置样式
dialog::backdrop{background-color:rgba(0, 0, 0, 0.4);}
可以监听dialog的click事件，做到点击背景遮罩就能关闭模态框(当然这个可能不是完美的玩法)：
modal.addEventListener('click', (event) => {if(event.target === modal) { modal.close('cancelled'); }});
Browser compatibility
目前，PC端只有Chrome,Opera支持，其他的厂家也应该会很快支持。不过也不用担心，可以通过dialog-polyfill(https://github.com/GoogleChrome/dialog-polyfill) 来兼容到IE9+
Polyfill
安装的方式可以通过npm也可以通过常规的script标签来引入。当使用polyfill的时候，每个对话框都需要初始化一次。
dialogPolyfill.registerDialog(modal);
在低版本的浏览器是不支持伪元素的，polyfill会添加一个新的元素来充当backdrop。样式上得再加上：
dialog+.backdrop{background-color:rgba(0, 0, 0, 0.4);}
附
完整的demo在这里（https://codepen.io/keithjgrant/pen/eyMMVL?editors=0101）
版权声明：本文内容由互联网用户自发贡献，版权归作者所有，本社区不拥有所有权，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：yqgroup@service.aliyun.com 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
