您的位置: 首页  >  文章  >  一起来看 HTML 5.2 中新的原生元素

一起来看 HTML 5.2 中新的原生元素

分类: 文章 • 2025-03-20 21:25:15

不到一个月前， HTML 5.2 正式成为 W3C 的推荐标准（ REC）,其中，推出了一个新的原生模态对话框元素 <dialog>，乍一看，可能感觉它就是一个新增的元素，然而，作者最近在玩的时候，发现它确实是一个值得期待和很有意思的元素，在这里分享给大家

这是 <diglog> 最基础的示例



    

  1. <dialog open>
    2. 

  2.     Native dialog box!
    3. 

  3. </dialog>
    4. 



其中， open 属性表示此时 dialog 是可见的，如果没有 open， dialog将会隐藏，你可以使用 JavaScipt 将它显现出来，此时， dialog 渲染如下


一起来看 HTML 5.2 中新的原生元素 <dialog>


它 绝对定位 于页面之上，就如我们期望的一样，出现在内容的上方，并且 水平居中，默认情况下，它 和内容一样宽


基本操作


JavaScipt 有几个 方法 和 属性 可以很方便地处理 dialog 元素，使用最多的可能还是 showModal() 和 close()




    

  1. const modal = document.querySelector('dialog');
    2. 

    3. 

  3. // makes modal appear (adds `open` attribute)
    4. 

  4. modal.showModal();
    5. 

    6. 

  6. // hides modal (removes `open` attribute)
    7. 

  7. modal.close();
    8. 



当你使用 showModal() 来打开 dialog 时，将会在 dialog 周围加一层阴影，阻止用户与 非 diglog 元素的交互，默认情况下，阴影是 完全透明 的，你可以使用 CSS 来修改它


按 Esc 可以关闭 dialog，你也可以提供一个按钮来触发 close()


还有一个方法是 show()，它也可以让 dialog 显现，但与 showModal() 不同的是它没有阴影，用户可以与非 dialog 元素进行交互


浏览器支持和 Polyfill


目前，只有 chrome 支持 <dialog>， Firefox 需要在 about:config里允许 dom.dialog_element.enabled 才能正常使用，我猜想， Firefox在不久的将来就会支持


一起来看 HTML 5.2 中新的原生元素 <dialog>


上图为 caniuse.com 关于 dialog 特性主流浏览器的兼容情况


幸运的是，我们可以使用 dialog-polyfill 来缓解这种尴尬，它既提供了 JavaScript的行为，也包含了默认的样式，我们可以使用 npm 来安装它，也可以使用 <script> 标签来引用它。目前，它已支持各主流浏览器，包括 IE 9 及其以上版本


只是，在使用它时，每个 dialog 需要使用下面语句进行初始化




  1. dialogPolyfill.registerDialog(dialog);


并且，它并不会取代浏览器原生的行为


样式


打开和关闭模态框是最基本的，但这是肯定不够的， <dialog> 最开始时样式是不怎么好看的，因此，我们需要自定义它的样式，此外，我们可以通过设置伪元素 ::backdrop 来优化 <dialog> 显现时背影的样式




    

  1. dialog {
    2. 

  2.     padding: 0;
    3. 

  3.     width: 478px;
    4. 

  4.     text-align: center;
    5. 

  5.     vertical-align: middle;
    6. 

  6.     border-radius: 5px;
    7. 

  7.     border: 0;
    8. 

  8. }
    9. 

    10. 

  10. dialog::backdrop {
    11. 

  11.     background-color: rgba(0, 0, 0, 0.1);
    12. 

  12. }
    13. 



为了兼容老的浏览器，使用 polyfill 时， ::backdrop 是不起作用的，但 polyfill 会在 dialog 后面添加一个 .backdrop 元素，我们可以像下面这样定位它




    

  1. dialog + .backdrop {
    2. 

  2.   background-color: rgba(0, 0, 0, 0.4);
    3. 

  3. }
    4. 



接下来，是时候向 bialog 里添加更多的内容，一般包括 header， body 和 footer




    

  1. <dialog id="sweet-modal">
    2. 

  2.     <h3 class="modal-header">sweet dialog</h3>
    3. 

  3.     <div class="modal-body">
    4. 

  4.         <p>This is a sweet dialog, which is much better.</p>
    5. 

  5.     </div>
    6. 

  6.     <footer class="modal-footer">
    7. 

  7.         <button id="get-it" type="button">Get</button>
    8. 

  8.     </footer>
    9. 

  9. </dialog>
    10. 



最后，在添加一些 CSS，你就能得到你想要的


进阶操作


通常，我们期望能从 dialog 中获取一些用户的信息。关闭 dialog 时，我们可以给 close() 传递一个 string，然后通过 dialog 元素的 returnValue属性来获取




    

  1. modal.close('Accepted');
    2. 

    3. 

  3. console.log(modal.returnValue); // logs `Accepted`
    4. 



当然，还存在额外的事件我们可以监听，其中，最常用的可能是 close（关闭 dialog 时触发），还有 cancel （用户按 Esc 关闭 dialog 时触发）


此外，我们可能还期望点击 dialog 旁边的阴影来关闭，当然，这也是有解决办法的。点击阴影会触发 dialog 的点击事件，如果 dialog 的子元素占满了整个 dialog，那么我们可以通过监听 dialog 的点击，当 target 为 modal 时来关闭它




    

  1. modal.addEventListener('click', (event) => {
    2. 

  2.     if (event.target === modal) {
    3. 

  3.         modal.close('cancelled');
    4. 

  4.     }
    5. 

  5. });
    6. 



当然，这不是完美的，但它确实是有效的，如果你有更好的方式，欢迎在评论中交流


总结


说了这么多，不如自己实际演练一番，作者也做了一个 demo，欢迎参考





原文：https://keithjgrant.com/posts/2018/meet-the-new-dialog-element/


译文：https://segmentfault.com/a/1190000012894864


一起来看 HTML 5.2 中新的原生元素 <dialog>


															

																					

								

									相关推荐