dialog.showmodal()是唯一能触发模态行为的调用方式,仅设open属性或写标签无效;必须确保dom就绪、避免css干扰、手动处理backdrop样式与点击关闭逻辑。

dialog.showModal() 必须显式调用,open 属性不等于模态激活
写了 <dialog></dialog> 却没弹出来?不是 CSS 问题,是根本没“启动”它。原生 dialog 默认不渲染、不占布局、getBoundingClientRect() 返回空值——它连 DOM 绘制都跳过。
仅加 open 属性(如 <dialog open></dialog>)能让内容可见,但无 backdrop、不锁焦点、不响应 Esc,只是“浮层”,不是模态框。必须调用 dialog.showModal() 才真正激活模态行为。
- 脚本执行早于 DOM 加载会报
Cannot read property 'showModal' of null:把<script></script>放在
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











