dialog 元素必须调用 showmodal() 才是真正的模态框，否则仅 display:block、无遮罩、不拦截 esc、不管理焦点；show() 和 open 属性等效，仅显示不模态；backdrop 非 dom 节点，需通过 click 事件判断点击来源；form method="dialog" 可自动关闭并设 returnvalue；safari 不支持 showmodal() 返回 promise，需统一用 close 事件。
dialog 元素不加 showModal() 就不是模态框
很多人写完 <dialog></dialog> 发现点击背景没遮罩、按 Esc 不关闭、焦点还在页面其他地方——根本原因就是只用了 show() 或直接设了 open 属性。浏览器对 <dialog></dialog> 的默认渲染和 <div> 几乎一样，只有调用 <code>showModal() 才真正激活原生模态行为。
关键区别：
-
showModal()：自动加::backdrop、禁用底层 Tab 键、聚焦第一个可聚焦子元素、响应 Esc、支持returnFocus() -
show()：仅设display: block，不锁背景、不处理焦点、不拦截 Esc，适合工具提示类轻量浮层 - 直接写
<dialog open></dialog>等价于show()，不是模态
点击 backdrop 关闭时无法区分来源
<dialog></dialog> 的 backdrop 是渲染层效果，不是真实 DOM 节点，所以没有 class、不触发独立事件，也不能用 e.target.classList.contains('backdrop') 判断。
正确监听方式：
- 监听
dialog自身的click事件，检查e.target === dialog（即点击区域是 dialog 容器本身，而非其子元素） - 若需区分“确认按钮关闭”和“点击遮罩关闭”，统一用
dialog.close('confirm')/dialog.close('cancel')，再在close事件里读dialog.returnValue - 注意：backdrop 点击不会触发
cancel事件，只触发click和后续的close
form method="dialog" 是关闭 + 返回值的快捷方案
在 <dialog></dialog> 内放一个 <form method="dialog"></form>，提交时会自动调用 dialog.close()，且把 submit 按钮的 value 设为 dialog.returnValue。
实操要点：
- 按钮必须是
<button type="submit"></button>，且带value属性（如<button type="submit" value="ok">确定</button>） - 表单提交后，
dialog.returnValue即为该value字符串，无需手动调用close() - 取消按钮也建议用 submit，
value="cancel"，保持逻辑一致 - 不推荐用
<a href="#"></a>或纯 JSclick绑定来关闭，容易漏掉 returnValue 或焦点管理
Safari 对 showModal() 的 Promise 返回值不支持
Chrome/Firefox 中 dialog.showModal() 返回 Promise，可用于 await 等待关闭；但 Safari 目前仍返回 undefined，必须改用事件监听。
兼容写法：
- 不要写
await dialog.showModal() - 统一监听
dialog.addEventListener('close', () => { ... })获取关闭后逻辑 - 如果需要等待关闭后再执行某操作（比如刷新列表），把该逻辑放进
close回调里 - 注意：Safari 中
close事件触发时机与其他浏览器一致，只是 Promise 不可用
<dialog></dialog> 成为“浮动小窗”的，不是 CSS 定位，而是 showModal() 触发的浏览器级模态栈行为。很多开发者花时间调 transform 和 z-index，却忘了先调这个方法——它才是让浮层“浮起来”且“阻断交互”的开关。
