现代浏览器原生支持元素，调用showmodal()即可打开模态框，但需确保元素已渲染且可访问；关闭必须用close()而非remove()或hidden；不支持浏览器需回退自定义方案并处理焦点与可访问性。
点击按钮触发 showModal() 打开原生模态框
现代浏览器（Chrome 99+、Edge 99+、Firefox 110+）已原生支持 <dialog></dialog> 元素，无需 JS 控制显隐逻辑，直接调用 showModal() 即可居中显示并遮罩背景。关键前提是：按钮必须在 DOM 中能访问到该 <dialog></dialog> 元素，且元素已渲染。
常见错误是按钮点击时 <dialog></dialog> 尚未挂载（比如动态插入或条件渲染未完成），导致 getElementById() 返回 null，调用 showModal() 报错 Cannot read property 'showModal' of null。
- 确保
<dialog id="myDialog"></dialog>在 HTML 中静态存在，或确认 JS 执行前它已被插入 DOM - 按钮绑定事件推荐用
addEventListener，避免内联onclick造成作用域混乱 -
showModal()会自动聚焦第一个可聚焦子元素；若无，需手动dialogEl.focus()
关闭弹窗必须用 close() 而非 remove() 或 hidden=true
close() 是 <dialog></dialog> 的标准方法，它不仅隐藏元素，还会重置内部状态（如焦点返回触发按钮）、释放模态栈、允许后续再次调用 showModal()。误用 remove() 会导致下次无法打开（DOM 中已不存在），而设 hidden=true 或 display:none 会破坏模态行为（失去遮罩、键盘焦点锁失效、Esc 键无效）。
- 关闭按钮应放在
<dialog></dialog>内部，并绑定click事件调用dialogEl.close() - 监听
close事件可做清理：dialogEl.addEventListener('close', () => { /* 清空表单、重置状态 */ }) - 用户按 Esc 或点击背景蒙层也会触发
close事件，无需额外监听
IE 和旧版 Safari 不支持 <dialog></dialog>，得用 CSS + JS 模拟
若需兼容 IE 或 Safari ≤ 15.6，<dialog></dialog> 会被忽略，此时必须回退到自定义方案：用 div 模拟弹窗结构，靠 z-index 和 position: fixed 实现遮罩与居中，再用 JS 控制 classList.toggle('open') 切换显隐。
- 务必设置
inert属性或用aria-hidden="true"禁用背景交互，否则屏幕阅读器和键盘 Tab 仍可操作后方内容 - 手动实现焦点管理：打开时
dialogEl.focus()，关闭时triggerBtn.focus() - 监听
keydown捕获 Esc 键：e.key === 'Escape' && dialogEl.classList.contains('open') && closeDialog()
showModal() 阻塞脚本执行，但不阻塞页面滚动或动画
调用 showModal() 后，JS 会暂停执行直到用户关闭弹窗（类似 alert()），但页面其余部分仍可响应滚动、CSS 动画继续运行——这点常被误解为“整个页面冻结”。真正冻结的是当前函数调用栈，不是 UI 线程。
- 不要在
showModal()后写依赖弹窗关闭的同步逻辑，比如showModal(); console.log('after')永远不会执行 - 需要后续动作，请改用
dialogEl.addEventListener('close', handler) - 若弹窗内有异步操作（如表单提交），关闭时机由业务逻辑决定，不受
showModal()阻塞影响
实际开发中，最容易被忽略的是焦点管理和可访问性支持——哪怕用了原生 <dialog></dialog>，如果内部没有可聚焦元素或没处理 close 事件后的状态重置，键盘用户和屏幕阅读器使用者就会卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
