dialog.close() 是关闭 的唯一标准方式，其他如 hidden、display 或 remove 会破坏模态行为；点击遮罩需兼容 safari 的坐标判断；表单 method="dialog" 可自动关闭并传值；esc 关闭需确保焦点在 dialog 内并手动监听；关闭后须手动恢复触发元素焦点。
dialog.close() 是唯一标准关闭方式
调用 close() 是关闭 <dialog></dialog> 的唯一规范方法，其他操作如设 hidden=true、display: none 或直接 remove() 都会破坏模态行为：焦点锁失效、Esc 键无响应、后续 showModal() 报错或静默失败。
常见误判是看到弹窗“没消失”就以为 close() 失效——其实它已执行，只是视觉未更新，原因通常是：
-
dialog元素尚未被showModal()激活（即没调用过打开方法），此时close()被浏览器忽略 - 脚本执行早于 DOM 就绪，
document.querySelector('dialog')返回null，导致.close()无法调用 - 父容器 CSS 含
transform或will-change，在 Safari 中导致open属性存在但渲染不可见
点击遮罩关闭需手动监听 click 事件
原生 <dialog></dialog> 的 backdrop 不是真实 DOM 节点，无法直接绑定事件。所谓“点击遮罩关闭”，本质是监听 dialog 自身的 click 事件，并判断 e.target === dialog —— 这表示点击发生在内容区之外（即 backdrop 区域）。
但这个判断在 Safari 中基本不可靠（截至 v17.6），因为其事件路径不暴露 backdrop，e.target 常为 document 或 body。稳妥做法是：
- Chrome/Edge 120+ 可用：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari 用户必须降级：监听
click后用dialog.getBoundingClientRect()判断坐标是否落在弹窗可视区域内，区域外即视为 backdrop 点击 - 绝对不要写
dialog::backdrop { pointer-events: auto; }并试图给伪元素加事件——它不可编程
用 method="dialog" 表单提交自动关闭
在 <dialog></dialog> 内嵌 <form method="dialog"></form>，点击其中任意 <button type="submit"></button>（或未声明 type 的 button）会自动触发 close()，且将按钮的 value 赋给 dialog.returnValue。
但要注意：
- 必须显式写
value属性：<button value="confirm">确定</button>，否则returnValue为空字符串 - Safari（v17.6 及更早）始终返回空字符串，不能依赖它传值
- 禁用
event.preventDefault()或onsubmit="return false"，否则默认关闭行为被拦截 -
<button type="button"></button>不触发表单提交，也就不会关闭弹窗
Esc 键关闭必须监听 keydown 事件
showModal() 确实支持 Esc 关闭，但仅限于弹窗处于激活状态且焦点在其中。若弹窗内无任何可聚焦元素（比如全是 <p></p> 和 <span></span>），首次打开后焦点可能落在 body，Esc 就无效。
可靠做法是主动管理键盘事件：
- 打开时确保至少一个子元素可聚焦（如
<input>），或手动调用dialog.focus() - 监听
keydown：dialog.addEventListener('keydown', e => { if (e.key === 'Escape') dialog.close(); }) - 注意：该监听必须在
showModal()之后绑定，否则可能错过首次按键 - 关闭后记得清理监听器，或用一次性监听（
{ once: true }）避免重复绑定
最易被忽略的是：所有这些关闭方式（close()、表单提交、Esc、点击 backdrop）都不会自动把焦点还给触发按钮。如果不手动调用 triggerBtn.focus()，键盘用户会卡在空白处，这是无障碍访问的关键断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
