dialog 必须调用 showmodal() 才激活完整模态行为，仅设 open 属性无效；表单需 method="dialog" 或 preventdefault() 防刷新；遮罩关闭需严格判断 e.target === dialog；样式须重置 position/fixed 居中且显式设置 ::backdrop。

dialog 标签本身不自动显示，也不处理表单提交逻辑——写完<dialog></dialog>标签后页面空空如也，不是你漏了 CSS，是根本没“启动”它。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

dialog.showModal() 是唯一可靠启动方式

仅加 open 属性（如 <dialog open></dialog>）会让内容可见，但无遮罩层、不锁 Tab 焦点、不响应 Esc 键，本质只是个带 display: block 的浮层，不是模态对话框。

• 必须调用 dialog.showModal() 才真正激活模态行为：焦点锁定、Esc 关闭、::backdrop 渲染
• 脚本执行早于 DOM 加载会报 Cannot read property 'showModal' of null：把 JS 放在

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！