by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11213 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、好不好用过才知道 HTML5 <dialog>元素使用showModal()显示的时候，自动层级最高，自动居中，自动有黑色蒙层，明显就比使用show()方法或者设置open属性显示弹框要好。 于是，就在前段时间，对于LuLu UI Edge主题的弹框组件，我就进行了大刀阔斧的修改，让弹框的显示均采用showModal()方法（通过劫持open属性实现）。 修改完了自我感觉良好，但是真的实践之后，痛苦的事情来了，由于dialog元素顶层了，因此，自定义的验证提示，浮动定位，toast提示等，全都无法显示，因为这些组件的元素创建都是在body元素下的，由于弹框层级顶级，因此，这些组件样式被覆盖地死死的，用户根本就看不到。 唯一的方法就是让toast元素，浮层元素全都append到<dialog>元素中，这实在是太麻烦了。 于是，没办法，妥协，仅alert和confirm类型的弹框使用showModal()显示，其他类型的弹框还是传统的show()方法显示，使用JavaScript进行层级控制。 可见，看起来很棒的特性真正使用，可能并没有想的那么好。 就像找对象一样，看起来长得漂亮身材又好，真正相处并不一定自在。 二、顶层特性说的是什么？ 撤了这么久的“顶层特性”究竟是什么呢？ MDN上对这个术语有专门的文档，参见：https://developer.mozilla.org/en-US/docs/Glossary/Top_layer 简而言之，就是浏览器会在文档外创建一个独立的层，这个层正好覆盖整个浏览器视口的宽度和高度，位于页面所...