dialog元素默认隐藏，需调用showModal()或show()显示；关闭必须用close()而非hidden/display；点击backdrop关闭需手动监听；兼容性差时应动态替换为div模拟。
dialog 元素必须配合 showModal() 或 show() 才能显示
直接写 <dialog></dialog> 不会自动出现，它默认是隐藏的（display: none）。很多初学者把 HTML 写好、CSS 加了 backdrop，但点击按钮没反应，根本原因是没调用显示方法。
正确做法是：先用 JS 获取元素，再显式调用 showModal()（推荐，带模态遮罩和焦点锁定）或 show()（非模态，少用）：
<button id="openBtn">打开弹窗</button>
<dialog id="myDialog">
<p>这是弹窗内容</p>
<button id="closeBtn">关闭</button>
</dialog>
<script>
const dialog = document.getElementById('myDialog');
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');
openBtn.addEventListener('click', () => dialog.showModal());
closeBtn.addEventListener('click', () => dialog.close());
</script>
关闭弹窗必须用 dialog.close()，不能只靠 hidden 或 display
dialog.close() 不仅隐藏元素，还会触发 close 事件、恢复页面焦点、释放 Esc 键监听，并让 dialog.open 属性变为 false。如果只写 dialog.hidden = true 或加 CSS display: none，后续再调 showModal() 会失败，且 Esc 键仍可关闭（因为底层状态没更新）。
常见错误场景：
立即学习“前端免费学习笔记（深入）”；
- 用
dialog.style.display = 'none'关闭 → 下次showModal()报错：Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a top layer. - 没监听
close事件清理副作用（如定时器、fetch 中断），导致内存泄漏或逻辑错乱
点击遮罩层（backdrop）关闭需手动监听 click 事件
原生 <dialog> 不支持点击 backdrop 关闭 —— 这是很多人以为的“默认行为”，实际并不存在。必须自己判断点击是否落在 backdrop 上：
dialog.addEventListener('click', (e) => {
if (e.target === dialog) {
dialog.close();
}
});
注意：e.target === dialog 成立，说明点的是半透明遮罩区域（即 dialog 元素自身，且未命中内部子元素）。这个判断简单可靠，比检查 clientX/clientY 或计算 bounding rect 更安全。
补充提醒：
- 确保 dialog 没有设置
pointer-events: none，否则 click 事件不会触发 - 如果 dialog 内部有滚动内容，且用户在边缘点击 backdrop，该逻辑依然生效
兼容性差时 fallback 方案要避开 dialog 的 DOM 状态陷阱
Safari 15.4+ 和 Firefox 98+ 才完整支持 showModal()；旧版 Safari 只支持 show()（无遮罩、无焦点管理）。若需兼容，不要写两套逻辑共用同一个 <dialog> 元素 —— 容易因 open 属性和内部状态不一致导致不可控行为。
更稳妥的做法：
- 检测支持：
if ('showModal' in HTMLDialogElement.prototype) - 不支持时，动态创建一个
<div role="dialog">替代，用 class 控制显隐，并手动处理焦点环、Esc和 backdrop 点击 - 避免对同一个元素混用
dialog.showModal()和element.classList.add('visible')
最常被忽略的一点：即使用了 polyfill（如 @github/details-dialog），也要确认它是否重写了 close() 方法的行为，否则自定义关闭逻辑可能失效。
