dialog必须作为body直接子元素才能激活模态行为，否则无遮罩、Esc无效、点击背景不关闭；需配合aria-labelledby、aria-modal="true"及手动焦点管理。
dialog元素必须作为body直接子元素才能激活模态行为
很多弹窗写了dialog却没遮罩、按Esc没反应、点击背景不关闭，根本不是JS写错了，而是DOM结构不合法。浏览器只认dialog是<body>的直接子节点时，才启用完整模态逻辑——焦点锁定、showModal()自动设open、::backdrop渲染等。
常见错误：
• 把dialog包在<div id="app">或<main>里
• 用Vue/React的root容器包裹它
• 脚本执行时dialog还没挂到body下（比如用appendChild动态插入但没等DOM就绪）
实操建议：
• 手动把dialog标签写在</body>前，不嵌套任何父容器
• JS初始化必须在DOMContentLoaded后，或把脚本放</body>上方
• 别手动加open属性——showModal()会自动设，删它等于关窗
ARIA属性不能省，但role="dialog"不是万能解药
dialog原生带语义，但屏幕阅读器仍需明确上下文。仅靠role="dialog"不够，必须配对使用aria-labelledby和aria-modal="true"，否则部分读屏软件（如NVDA旧版）会忽略模态状态，用户不知道背景已失焦。
立即学习“前端免费学习笔记（深入）”；
关键组合：
• aria-labelledby="dialog-title"：指向弹窗内<h2 id="dialog-title">，提供可读标题
• aria-modal="true"：强制声明“当前内容为模态”，禁用背景交互
• aria-describedby（可选）：指向弹窗说明段落，补充上下文
注意：
• 不要用role="alertdialog"代替role="dialog"，除非是确认删除等高危操作
• aria-hidden="true"别乱加在背景上——aria-modal="true"已隐含此行为，重复设置可能干扰焦点流
焦点管理必须手动干预，尤其打开和关闭两个节点
原生dialog不会自动把焦点移到内部第一个可聚焦元素，也不会在关闭后回退到触发按钮。键盘用户一打开就卡在页面顶部，关闭后Tab键继续在背景滚动——这是最常被忽略的可访问性断裂点。
实操要点：
• 打开后立刻调用dialog.querySelector('input, button, [tabindex="0"]')?.focus()
• 关闭时必须用dialog.close()，然后手动triggerBtn.focus()（别依赖autofocus，Safari不认）
• 如果弹窗内无自然可聚焦元素，给外层dialog加tabindex="-1"再focus()
陷阱：
• dialog.returnValue在Safari中恒为空字符串，别靠它传值
• 表单提交用method="dialog"时，按钮必须带value属性，否则returnValue拿不到值
遮罩层点击判断在Safari里根本不可靠
想实现“点遮罩关闭弹窗”，很多人写dialog.addEventListener('click', e => { if (e.target === dialog) close() })。这在Chrome/Edge能跑通，但在Safari（截至v17.6）里基本失效——e.target经常指向内部文本节点或按钮，哪怕你点的是空白处。
兼容方案：
• 监听dialog的click事件
• 用dialog.getBoundingClientRect()获取弹窗可视区域
• 判断e.clientX和e.clientY是否落在该区域内，区域外即为点击遮罩
• 别在dialog上用e.stopPropagation()——这会破坏Esc和屏幕阅读器导航
更稳妥做法：
• 遮罩层用dialog::backdrop样式控制，不绑事件
• 真要禁用遮罩关闭，改用<div role="dialog"> + 手动状态管理，并设aria-modal="true"
