dialog标签默认不渲染，必须调用showModal()才激活模态行为；仅设open属性或改display仅可见但无遮罩、不锁焦点、不响应Esc，且常见问题包括DOM未就绪、嵌套过深、CSS干扰及backdrop点击需手动监听。
dialog 标签写完不会自动弹出来，必须调用 showModal() 才真正激活模态行为；只加 open 属性或改 display 样式，都只是“看得见”，不是“锁得住”的弹窗。
为什么写了 <dialog></dialog> 却完全看不到？
不是 CSS 没生效，是浏览器根本没渲染它——<dialog> 默认 display: none 且跳过布局计算，getBoundingClientRect() 返回空值，连 DOM 绘制都省了。常见原因包括：
-
showModal()调用太早：脚本放在<head>里，document.querySelector('dialog')返回null，报Cannot read property 'showModal' of null - 元素没挂到
<body>直接子级：嵌套在<div class="wrapper">或<form>里，Safari 和部分 Chrome 版本下::backdrop不出现 - 手动删了
open属性：showModal()会自动加，但后续执行dialog.removeAttribute('open')就让弹窗“消失”（DOM 还在，只是被判定为未激活） - 用了
dialog.style.display = 'block'或dialog.hidden = false：绕过原生焦点管理，Tab 键直接穿透到背景页
点击遮罩层（backdrop）为什么不关闭？
这不是 bug，是规范明确不支持自动关闭：showModal() 创建的 ::backdrop 是伪元素，不可点击、不冒泡事件，也不触发任何监听器。正确做法是监听 dialog 自身的 click 事件，并严格判断目标：
- ✅ 推荐写法：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - ⚠️ Safari 15.4–16.3 兼容陷阱：
e.target可能始终是body，需 fallback 到坐标判断，例如e.clientX < dialog.getBoundingClientRect().left - ❌ 禁止写成
dialog.addEventListener('click', () => dialog.close())：点内部按钮也会关窗 - ❌ 别对
dialog::backdrop绑定事件：它不是真实节点，无法 attach listener - ❌
show()模式下没有 backdrop，这段逻辑无效
form 提交后页面刷新、dialog 消失怎么办？
因为 <form> 在 <dialog> 内仍按默认行为提交，整页 reload —— dialog.close() 根本没机会执行。分两种情况处理：
立即学习“前端免费学习笔记（深入）”；
- 简单确认/取消场景：给
<form>加method="dialog"属性，提交后自动关闭并设dialog.returnValue（注意：<button value="confirm">的value才会成为返回值；Safari 17.6 前始终返回空字符串，不能依赖） - 需要异步提交（如
fetch）：必须在submit事件中第一时间调用e.preventDefault()，再手动执行请求和dialog.close() - ⚠️ 关闭逻辑别写在按钮
onclick里：用户按回车提交会漏掉 - ⚠️ 记得重置表单状态（清空
input、恢复按钮文字），否则下次打开还是脏数据 - ⚠️
enctype默认是application/x-www-form-urlencoded；传 JSON 时要显式设为application/json
样式错位、焦点丢失、Safari 不居中怎么补？
<dialog> 几乎没有跨浏览器一致的默认样式：Chrome 圆角白底带阴影，Firefox 是透明块，Safari 默认不居中，且父容器有 transform 或 will-change 时可能完全不渲染。关键补救点：
- 强制居中需重置定位：
dialog { margin: 0 auto; width: 90vw; max-width: 480px; }；必须挂载在<body>直接子级，否则内置居中逻辑失效 - 焦点管理不可忽略：首次打开后可手动调用
dialog.querySelector('input')?.focus()；关闭后记得triggerBtn.focus()，否则键盘用户卡住 -
::backdrop样式支持有限：仅支持background、opacity等，不支持transform或border；Safari 15.4+ 才开始支持，旧版需 JS 模拟一层<div class="backdrop"> - 移动端加
max-height: 90vh防溢出；声明明确的color和background-color，避免继承导致不可读 - 兼容性检测不能只靠
@supports (display: dialog)：应运行时判断typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype
最常被忽略的是：dialog 的行为高度依赖浏览器实现细节，尤其是 Safari 对 returnValue、focus() 和 ::backdrop 的支持断层，以及父容器 CSS 对渲染路径的破坏。不要指望“写了就跑通”，每个交互点都得亲手验证。
