<dialog> 加 open 属性仅控制可见性，不触发模态行为；必须调用 showModal() 才启用遮罩、焦点捕获和 Esc 关闭，关闭须用 close() 而非修改 open 属性。
<dialog> 标签本身不自动创建模态框，必须配合 showModal() 方法才能实现真正的模态行为（阻塞交互、背景变灰、按 Esc 关闭等）。直接用 open 属性只会显示非模态浮层，没有遮罩、不拦截点击、也不聚焦。
为什么 <dialog> 加了 open 属性还是不模态？
这是最常踩的坑：open 是一个布尔属性，它只控制元素是否“可见”，但不触发模态逻辑。浏览器不会自动加 backdrop、不会禁用底层内容、也不会绑定 Esc 键事件。
- ✅ 正确做法：用 JavaScript 调用
dialog.showModal() - ❌ 错误写法：
<dialog open>...</dialog>（只是普通浮动层） - ⚠️ 注意：
showModal()会自动将焦点移入 dialog 内第一个可聚焦元素，若没有，需手动focus()
如何用 showModal() 和 close() 控制弹窗生命周期？
所有交互控制必须走 JS 方法，HTML 属性仅用于初始状态或样式辅助。关闭时调用 close()，不是设置 open=false —— 后者无效且可能破坏内部状态。
-
dialog.showModal()：显示模态框，启用 backdrop，捕获焦点，监听 Esc -
dialog.close()：隐藏并重置内部状态；可传参作为返回值，如dialog.close('confirm') -
dialog.returnValue：读取关闭时传入的值（仅在close()调用后有效） - 监听关闭事件：
dialog.addEventListener('close', () => {...})，注意不是click或blur
const dialog = document.querySelector('dialog');
document.getElementById('openBtn').addEventListener('click', () => {
dialog.showModal();
});
dialog.addEventListener('close', () => {
console.log('用户操作结果：', dialog.returnValue); // 'cancel' 或 'confirm'
});怎么让 <dialog> 在 Safari 和旧版 Chrome 中可用？
<dialog> 在 Safari 15.4+ 和 Chrome 37+ 支持 showModal()，但 Safari 15.2–15.3 有严重 bug（backdrop 不显示、Esc 无响应），Firefox 目前完全不支持 showModal()（仅支持 open 属性）。
立即学习“前端免费学习笔记（深入）”；
- 检测支持：
typeof dialog.showModal === 'function' - 降级方案：不支持时，用
position: fixed+ 手动 backdrop +inert属性禁用底层交互 - 避免依赖 CSS 动画控制显隐：
showModal()/close()是原子操作，CSStransition对open属性无效 - 不要用
display: none隐藏 dialog：会导致showModal()失败，应使用hidden属性或visibility: hidden
为什么点击 backdrop 无法关闭 dialog？
原生 <dialog> 的 backdrop **默认不可点击关闭** —— 这是设计行为，不是 bug。点击 backdrop 不会触发 close()，除非你主动监听 click 并判断是否点在 backdrop 上。
- Backdrop 元素可通过
::backdrop伪类样式化，但它不是真实 DOM 节点，无法直接绑定事件 - 安全做法：在 dialog 内部放一个「取消」按钮，或监听
dialog的click事件，检查event.target === dialog - 示例逻辑：
dialog.addEventListener('click', (e) => { if (e.target === dialog) { dialog.close('cancel'); } });
真正难的不是写出 <dialog> 标签，而是理解它和传统 JS 模态框的本质区别：它不提供「点击遮罩关闭」「自定义动画」「嵌套模态」等便利功能，所有这些都得自己补全。别把它当轮子，要当砖块用。
