dialog元素需用showModal()或show()方法触发显示，仅设open属性无效；showModal()支持模态行为但Safari不支持backdrop点击关闭；表单提交需手动close()并preventDefault()；Safari存在多项兼容性问题，建议降级方案。
dialog 元素必须配合 showModal() 或 show() 才会显示
直接写 <dialog></dialog> 在 HTML 里，页面加载后它默认是隐藏的，且不会自动参与布局流（display: none 级别），光靠 CSS 的 display: block 或 visibility: visible 都无法让它真正“弹出来”。必须用 JavaScript 调用方法触发。
常见错误是只加了 open 属性：<dialog open></dialog> —— 这确实能让元素“可见”，但不带模态遮罩、不拦截背景交互、不自动聚焦、Esc 键也不关闭，本质上只是个定位浮层，不是真正的对话框语义行为。
-
showModal()：推荐首选，启用完整模态行为（焦点锁定、背景失焦、Esc 关闭、点击 backdrop 关闭） -
show()：非模态，不阻断背景操作，适合工具提示类轻量弹出 - 调用前确保 DOM 已就绪，否则会报
TypeError: Cannot read properties of null
点击 backdrop 关闭 dialog 需要手动监听 click 事件
showModal() 默认支持点击遮罩层（backdrop）关闭，但仅限于 Chromium 112+ 和 Firefox 116+；Safari 目前（截至 Safari 17.5）仍不支持该行为，点击 backdrop 无反应。
为保兼容，建议主动监听：
立即学习“前端免费学习笔记（深入）”；
const modal = document.getElementById('my-modal');
modal.showModal();
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.close();
}
});
- 注意判断
e.target === modal，避免点到内部按钮或表单时误关 - 不要用
pointerdown，它在 backdrop 上可能不触发（尤其 Safari） - 如果用了
show()，则 backdrop 本就不渲染，此逻辑无效
dialog 内部表单提交后需显式调用 close()，否则不会自动关闭
<dialog> 不像原生 alert() 或某些 UI 库那样自动管理生命周期。哪怕你放一个 <form method="dialog">，提交后也只是让 dialog 失去 open 属性（视觉上消失），但实际未触发 close 事件，且焦点未归还、returnValue 未设置。
- 用
method="dialog"可以让 form 提交时自动调用dialog.close('submit')，但仅当按钮是<button type="submit">且没阻止默认行为 - 更可控的做法是监听
submit事件并手动close()：
document.querySelector('#my-modal form').addEventListener('submit', (e) => {
e.preventDefault();
// 处理数据...
modal.close('success'); // 可选传参，供后续 .returnValue 读取
});
- 忘记
e.preventDefault()是最常见疏漏，会导致页面刷新或跳转 -
close()后 dialog 仍存在于 DOM，只是移除了open属性，可复用
Safari 对 dialog 的支持仍有明显缺口
即使在最新 Safari 17.5 中，以下问题依然存在：
- 不支持
showModal()的 backdrop 点击关闭 - 不支持
dialog::backdrop伪元素样式（无法自定义遮罩颜色/透明度） -
focus()调用后焦点可能未真正进入 dialog，导致键盘导航失效 - 没有
beforetoggle事件（Chrome/Firefox 支持），无法拦截打开/关闭动作
若项目必须支持 Safari 且需要稳定模态体验，建议 fallback 到 role="dialog" + 手动焦点管理 + 自绘 backdrop 的方案，而不是强依赖原生 <dialog>。
原生 dialog 确实简洁，但“简易”不等于“零配置”——它的行为边界和浏览器差异，比看起来更值得花两分钟确认。
