dialog不显示需调用showmodal();仅加open属性无遮罩、不锁焦点;safari存在e.target兼容问题;表单提交需method="dialog"或preventdefault();样式需手动居中并设backdrop;降级时须补全焦点与无障碍支持。

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











