今天小编跟大家讲解下有关一起来看 HTML 5.2 中新的原生元素 <dialog> ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关一起来看 HTML 5.2 中新的原生元素 <dialog> 的相关资料，希望小伙伴们看了有所帮助。
不到一个月前 html 5.2正式成为W3C的推荐标准（REC）,其中 推出了一个新的原生模态对话框元素<dialog> 乍一看 可能感觉它就是一个新增的元素 然而 作者最近在玩的时候 发现它确实是一个值得期待和很有意思的元素 在这里分享给大家这是<diglog>最基础的示例
<dialog open> Native dialog box!</dialog>其中 open属性表示此时dialog是可见的 如果没有open dialog将会隐藏 你可以使用JavaScipt将它显现出来 此时 dialog渲染如下
它绝对定位于页面之上 就如我们期望的一样 出现在内容的上方 并且水平居中 默认情况下 它和内容一样宽
基本操作JavaScipt有几个方法和属性可以很方便地处理dialog元素 使用最多的可能还是showModal()和close()
const modal = document.querySelector('dialog');// makes modal appear (adds `open` attribute)modal.showModal();// hides modal (removes `open` attribute)modal.close();当你使用showModal()来打开dialog时 将会在dialog周围加一层阴影 阻止用户与非 diglog元素的交互 默认情况下 阴影是完全透明的 你可以使用css来修改它
按Esc可以关闭dialog 你也可以提供一个按钮来触发close()
还有一个方法是show() 它也可以让dialog显现 但与showModal()不同的是它没有阴影 用户可以与非dialog元素进行交互
浏览器支持和 Polyfill目前 只有chrome支持<dialog> Firefox需要在about:config里允许dom.dialog_element.enabled才能正常使用 我猜想 Firefox在不久的将来就会支持
上图为caniuse.com关于dialog特性主流浏览器的兼容情况
幸运的是 我们可以使用dialog-polyfill来缓解这种尴尬 它既提供了Javascript的行为 也包含了默认的样式 我们可以使用npm来安装它 也可以使用<script>标签来引用它。目前 它已支持各主流浏览器 包括IE 9及其以上版本
只是 在使用它时 每个dialog需要使用下面语句进行初始化
dialogPolyfill.registerDialog(dialog);并且 它并不会取代浏览器原生的行为
样式打开和关闭模态框是最基本的 但这是肯定不够的 <dialog>最开始时样式是不怎么好看的 因此 我们需要自定义它的样式 此外 我们可以通过设置伪元素::backdrop来优化<dialog>显现时背影的样式
dialog { padding: 0; width: 478px; text-align: center; vertical-align: middle; border-radius: 5px; border: 0;}dialog::backdrop { background-color: rgba(0, 0, 0, 0.1);}为了兼容老的浏览器 使用polyfill时 ::backdrop是不起作用的 但polyfill会在dialog后面添加一个.backdrop元素 我们可以像下面这样定位它
dialog + .backdrop { background-color: rgba(0, 0, 0, 0.4);}接下来 是时候向bialog里添加更多的内容 一般包括header body和footer
<dialog id="sweet-modal"> <h3 class="modal-header">sweet dialog</h3> <div class="modal-body"> <p>This is a sweet dialog, which is much better.</p> </div> <footer class="modal-footer"> <button id="get-it"type="button">Get</button> </footer> </dialog>最后 在添加一些css 你就能得到你想要的
进阶操作通常 我们期望能从dialog中获取一些用户的信息。关闭dialog时 我们可以给close()传递一个string 然后通过dialog元素的returnValue属性来获取
modal.close('Accepted');console.log(modal.returnValue); // logs `Accepted`当然 还存在额外的事件我们可以监听 其中 最常用的可能是close（关闭dialog时触发） 还有cancel（用户按Esc关闭dialog时触发）
此外 我们可能还期望点击dialog旁边的阴影来关闭 当然 这也是有解决办法的。点击阴影会触发dialog的点击事件 如果dialog的子元素占满了整个dialog 那么我们可以通过监听dialog的点击 当target为modal时来关闭它
modal.addEventListener('click', (event) => { if (event.target === modal) { modal.close('cancelled'); }});当然 这不是完美的 但它确实是有效的 如果你有更好的方式 欢迎在评论中交流
原文地址：Meet the New Dialog Element作者：Keith 翻译来源：https://www.jianshu.com/p/7987712c50d4来源：爱蒂网
