dialog标签默认隐藏，必须调用showModal()激活模态行为（加遮罩、锁焦点、响应Esc），仅写标签或设open属性无效；点击遮罩不自动关闭，需手动监听click事件并判断e.target === dialog后调用close()。
dialog 标签不加 open 属性就无法显示？
对，<dialog> 默认是隐藏的，即使写了 showModal() 也不行——它只负责“激活”，不负责“初始可见”。必须先让元素在 DOM 中存在且未被移除，但不能靠 CSS 的 display: none 或 hidden 属性控制显隐，否则 showModal() 会直接报错：Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document.
- 确保
<dialog>在页面加载时已存在于 HTML 中（不推荐动态innerHTML += '<dialog>...'后立刻调用） - 不要给
<dialog>设置hidden属性，也不要用style="display: none"—— 这会让它脱离渲染流，showModal()找不到有效上下文 - 正确做法：不设任何隐藏样式，靠 JS 控制显隐，首次显示用
dialog.showModal()，关闭用dialog.close()
showModal() 调用后点背景无法关闭？
这是默认行为，showModal() 创建的是“模态阻断”对话框：点击 backdrop（半透明遮罩层）不会自动关闭，必须显式调用 close()。不像 show()（非模态）那样支持点击 backdrop 关闭。
- 想实现点击 backdrop 关闭？得手动监听
click事件并判断是否点在 backdrop 上：dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - 注意：
e.target === dialog是关键，因为点击内部内容时e.target是子元素，只有点空白遮罩才命中 dialog 本身 - 别用
dialog.onclick = ...，容易被覆盖；也别监听document，会有事件冒泡干扰
dialog 在 Safari 上不工作或样式异常？
Safari 对 <dialog> 的支持从 v15.4 才开始完整，且早期版本有渲染 bug：比如 backdrop 不出现、showModal() 报错、或 position: fixed 子元素错位。
- 检查 Safari 版本，低于 15.4 的用户需降级方案（如用
div+ 手动管理 focus/scroll lock） - 避免在
<dialog>内部用position: fixed元素，Safari 可能将其定位基准错当成视口而非 dialog - Backdrop 样式无法直接修改（
::backdrop伪元素支持度尚可，但 Safari 需加前缀::-webkit-backdrop） - 务必测试
dialog.open属性读取是否可靠——某些旧版 Safari 返回undefined而非布尔值
如何让 dialog 内容居中且适配移动端？
浏览器原生 <dialog> 默认居中，但宽度、最大高度、内边距全靠 CSS 控制，且无内置响应式逻辑。
立即学习“前端免费学习笔记（深入）”；
- 基础居中已由 UA 样式保证，但需重置可能冲突的父容器样式（如
text-align: center影响 inline 内容） - 设置
max-width和width: fit-content防止过宽：dialog { width: fit-content; max-width: 90vw; margin: 2rem; } - 移动端小屏下，
margin可能导致左右溢出，建议用margin-inline: max(1rem, 5vw)或媒体查询单独处理 - 内部按钮或表单控件记得加
autofocus，否则键盘用户 Tab 焦点可能落在 body 上
<dialog> 看似简单，但 showModal() 的执行时机、backdrop 交互、Safari 兼容边界、以及焦点管理这些点，一个没踩准就会卡住整个流程。尤其要注意它和传统 modal 库的思维差异：不是“显示/隐藏”，而是“激活/关闭”状态机。 
