dialog不显示是因为未调用showModal()；原生dialog默认display:none、不渲染、不占布局，仅设open属性无效，必须在DOM加载后调用showModal()才能激活模态行为。
dialog不显示？先确认是否调用了showModal()
写了<dialog></dialog>但页面上什么都没出现，不是 HTML 写错了，是它压根没被激活。原生 dialog 默认 display: none，不参与布局、不渲染、不占空间——哪怕加了 open 属性，也只影响语义状态，不会强制显示（除非浏览器旧版兼容逻辑，但不可靠）。
必须显式调用 JavaScript 方法：
-
dialog.showModal()：模态弹出，锁背景、捕获焦点、支持 Esc 关闭、点击 backdrop 默认不关闭（需手动处理） -
dialog.show()：非模态浮层，几乎没人用在提示框场景
常见翻车点：
- JS 执行太早，DOM 还没加载完，
document.getElementById('myDialog')返回null - 把
dialog放在<table>或<span>里——它只能作为body的直系子元素或至少是流内容合法容器的子元素，否则可能被浏览器自动移出或降级为HTMLUnknownElement - 用
dialog.hidden = true或dialog.style.display = 'none'控制显隐，这会破坏焦点管理与 backdrop 行为
点击遮罩关闭弹窗？别直接监听 click 事件
showModal() 创建的灰色遮罩（::backdrop）本身没有 DOM 节点，无法直接绑定事件。浏览器也不会自动“点遮罩关弹窗”——这是和多数 JS 弹窗库的关键区别，也是最容易误解的一点。
立即学习“前端免费学习笔记（深入）”；
正确做法是监听 dialog 元素自身的 click，再判断点击目标是否为遮罩本身：
- 当
e.target === dialog，说明点在遮罩上 → 可安全调用dialog.close() - 当
e.target是内部按钮、输入框等子元素，就不该关闭
注意兼容性坑：
- Safari 15.4–16.3 存在 bug，
e.target常返回body，需 fallback 到坐标判断：e.clientX < dialog.getBoundingClientRect().left - 绝对不要写
dialog.addEventListener('click', () => dialog.close())，这会让所有点击都关弹窗
表单提交后页面刷新？漏了 e.preventDefault() 或没设 method="dialog"
在 <dialog> 里放 <form> 很常见，但直接点 type="submit" 按钮会导致整页 reload，看起来像弹窗“闪退”。
两种可靠解法：
- 简单交互：给
<form>加method="dialog"属性，提交后自动触发dialog.close()，且设置dialog.returnValue为按钮的value - 异步操作（如 fetch）：监听
submit事件，第一行必须是e.preventDefault()，再执行后续逻辑
额外注意：
- 关闭后记得手动重置表单字段，否则下次打开还是脏数据
- 传 JSON 时需显式设
enctype="application/json"，部分浏览器对FormData的默认行为不一致
样式居中、焦点、无障碍这些细节不能靠猜
dialog 默认不居中，也不保证首个可聚焦元素获得焦点——尤其当内部只有 <p> 或 <div> 时，showModal() 可能静默失败（无报错，但焦点没锁住）。
关键 CSS 和属性建议：
- 居中：用
margin: auto或place-items: center（配合display: grid） - 遮罩样式：
dialog::backdrop { background: rgba(0,0,0,0.5); }，别给它设z-index（规范禁止） - 焦点保障：内部至少一个可聚焦元素（如
<button>或带tabindex="0"的容器），并加autofocus属性 - 无障碍：必须加
aria-labelledby指向标题，或aria-label直接描述用途；否则屏幕阅读器无法识别这是对话框
最后提醒一句：Safari 15.4+、Chrome 37+、Firefox 98+ 支持 showModal()，IE 完全不支持；若需兼容老环境，得用 <div role="dialog"> + ARIA 手动实现，而不是硬塞 polyfill —— 那只会掩盖更深层的交互缺陷。
