show() 几乎没人用，因其不创建遮罩层、不锁定焦点、不拦截 Tab 键、背景页面完全可交互，仅相当于带语义和 close() 接口的 z-index div；真实项目中仅适用于工具提示类浮动面板。
show() 方法为什么几乎没人用
show() 确实存在，但它不创建遮罩层、不锁定焦点、不拦截 Tab 键、背景页面完全可点击可滚动——这和开发者心里想的“弹窗”差太远。它更像一个带 z-index 的 div，只是多了个语义标签和原生 close() 接口。真实项目中，除非你明确需要工具提示类浮动面板（比如代码编辑器里的快捷键提示），否则基本不会选 show()。
常见误用场景：
- 以为
show()点击遮罩能关闭 → 实际根本没有遮罩，e.target === dialog永远不会成立 - 依赖自动 focus 管理 →
show()不聚焦，Tab 键直接穿透到背景表单 - 期望按 Esc 关闭 → 默认不响应，必须自己监听并调用
close()
非模态对话框该用什么替代 show()
如果你真需要非模态交互（比如侧边配置面板、实时预览浮层、多任务辅助窗），推荐直接用 div + role="dialog" + 手动 focus 控制，而不是硬套 <dialog></dialog> 标签。
理由很实际：
立即学习“前端免费学习笔记（深入）”；
-
<dialog></dialog>的show()行为在 Safari 和旧版 Firefox 中支持不稳定，且无 polyfill 修复价值（官方 polyfill 只补showModal()） - 非模态场景通常要自定义定位、拖拽、resize、最小化等，
<dialog></dialog>不提供这些能力，反而增加语义冗余 - 屏幕阅读器对非模态
<dialog></dialog>的支持混乱：部分读屏会错误宣告“模态已开启”，造成无障碍缺陷
简单示例（语义正确、行为可控）：
<div role="dialog" aria-labelledby="panel-title" tabindex="-1"> <h2 id="panel-title">设置面板</h2> <button onclick="this.parentElement.remove()">关闭</button> </div>
后续用 JS 控制 display 或 visibility，配合 focus() 和 inert 属性管理交互范围。
如果非要用 <dialog></dialog> 实现非模态效果，必须手动补哪些逻辑
极少数情况（如统一组件库 API 设计），你可能想保留 <dialog></dialog> 标签但禁用模态行为。这时不能只调 show()，还得立刻补上三件事：
- 调用
dialog.focus()后立即document.body.focus()，避免焦点卡在空 dialog 上 - 给 body 加
style="overflow: visible"（某些浏览器会因showModal()残留样式影响滚动） - 监听
keydown并忽略 Esc，默认不响应；若需关闭，得绑定自定义快捷键（如 Ctrl+Shift+X）
注意：show() 不触发 close 事件，所以所有清理逻辑（清空表单、取消请求）都得靠显式调用 close() 触发，不能依赖事件监听。
Safari 兼容性是最大现实障碍
截至 2026 年 4 月，Safari 17.x 仍不支持 show() 的完整行为：调用后 dialog 可能渲染错位、returnValue 为空、close() 后 open 属性残留为 true。这些问题在 iOS Safari 上更严重。
检测方式别用 'show' in HTMLDialogElement.prototype，它返回 true 但实际不可靠。稳妥做法是：
if (!('showModal' in HTMLDialogElement.prototype) ||
/Safari\/\d/.test(navigator.userAgent) && !/Chrome|Chromium/.test(navigator.userAgent)) {
// 直接降级为 div 方案，不尝试 show()
}
真正容易被忽略的点：非模态需求往往伴随“多窗口并行”或“嵌入 iframe”，而 <dialog></dialog> 在 iframe 内调用 show() 时，焦点行为在 Safari 下完全失控——这时候连手动修复都无效，只能换方案。
