必须调用showModal()才能显示并激活模态行为，<dialog>默认隐藏且不响应CSS或click；showModal()自动禁背景、锁焦点、支持ESC和点击遮罩关闭，而show()仅为非模态浮层。
点击按钮触发弹窗的最简实现
直接用 onclick 绑定 alert() 或 confirm() 是最快路径，但仅适合调试或极简提示。真实项目中几乎不用——它阻塞主线程、无法定制样式、不支持键盘操作（如 ESC 关闭），且现代框架普遍禁用内联事件。
推荐做法是用原生 DOM 控制一个自定义 <dialog> 元素：
<button id="openBtn">打开弹窗</button> <dialog id="myDialog"> <p>这是弹窗内容</p> <button id="closeBtn">关闭</button> </dialog>
<dialog> 原生支持 showModal() 和 close()，自动处理焦点捕获和 backdrop 点击关闭，比手写 display: none/block 更可靠。
为什么 document.getElementById("myDialog").showModal() 报错？
常见错误是调用 showModal() 时元素还没被浏览器解析，或 <dialog> 不在 body 直接子级（某些 SSR 框架会嵌套 wrapper div）。报错信息通常是：Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document。
立即学习“前端免费学习笔记（深入）”；
解决办法：
- 确保脚本放在
</body>前，或监听DOMContentLoaded - 检查 DOM 结构：用浏览器开发者工具确认
<dialog>确实在<body>下，没有被<div id="root">等包裹 - 避免在 Vue/React 中直接操作原生
<dialog>—— 它们可能延迟挂载，改用组件状态控制显隐更稳妥
关闭弹窗时如何重置表单并释放焦点？
用户关闭弹窗后若焦点还卡在弹窗内部，键盘操作（如 Tab）会失效；表单未重置则下次打开显示旧数据。这两个问题常被忽略。
正确做法是在 close 事件中统一清理：
const dialog = document.getElementById("myDialog");
dialog.addEventListener("close", () => {
// 重置所有表单控件
const form = dialog.querySelector("form");
if (form) form.reset();
// 强制将焦点移回触发按钮
document.getElementById("openBtn").focus();
});
注意：reset() 不会清除 contenteditable 或自定义组件的内容，需单独处理；focus() 建议加 { preventScroll: true } 避免页面跳动。
IE 和 Safari 15.2 之前版本不支持 <dialog> 怎么办？
不能靠 polyfill 彻底模拟 showModal() 的行为（比如 ESC 键、焦点锁定、backdrop 点击穿透），尤其 Safari 旧版对 inert 属性支持也不完整。
务实方案：
- 检测支持性：
if ("showModal" in HTMLDialogElement.prototype) - 不支持时降级为带
aria-modal="true"的<div>，手动管理inert和焦点循环（用focusableElements列表 +keydown监听 ESC） - 避免在降级逻辑里重复实现 backdrop 点击关闭——直接用
event.target === backdropEl判断，别依赖事件冒泡路径
真正麻烦的不是样式兼容，而是无障碍交互链路（ARIA roles、键盘导航、屏幕阅读器播报）——这部分一旦漏掉，测试阶段才暴露，返工成本最高。
