dialog.showmodal()是唯一能真正激活模态行为的方式,必须调用它才能启用遮罩、焦点管理、esc关闭等完整功能;仅设open属性或手动修改display无效。

dialog.showModal() 是唯一能真正弹出模态框的调用方式
写了 <dialog></dialog> 标签但页面上什么都没有?不是 CSS 没写对,是根本没“启动”它。浏览器把 dialog 当作惰性元素:默认 display: none、跳过布局、不渲染 backdrop,getBoundingClientRect() 都返回空值。
必须调用 showModal() 才激活全部模态行为——加 dialog::backdrop、禁用背景 Tab 键、聚焦第一个可聚焦子元素、响应 Esc 键。仅设 open 属性(如 <dialog open></dialog>)只影响初始可见性,不触发任何模态逻辑,属于反模式。
- 脚本执行早于 DOM 加载会报
Cannot read property 'showModal' of null,确保在DOMContentLoaded后获取元素,或把<script></script>放在
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











