dialog.showModal() 必须由用户手势（如click）同步触发且dialog元素需为document.body直系子元素，否则会因违反顶层显示规则而失败或功能异常。
dialog.showModal() 会阻塞页面交互，但必须在用户手势触发下调用
直接在脚本加载时或定时器里调用 showModal() 会被浏览器静默拒绝，控制台报错 Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a top layer. 或更常见的 DOMException: The element does not have an acceptable position in the top layer.。根本原因是现代浏览器强制要求该方法必须由可信的用户事件（如 click、keydown）同步触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 绑定到按钮的
click事件处理函数中，且不能用setTimeout或Promise.then延迟调用 - 若需异步准备数据（如 fetch），先禁用按钮，请求完成后再调用
showModal() - 不要在
focus、input等非交互主事件中调用
dialog 元素必须是 document.body 的直系子元素才能正常 show
如果把 <dialog> 写在 <div class="modal-wrapper"> 之类容器里，showModal() 可能不报错但无法显示遮罩层、焦点不锁定、Esc 键无效——因为浏览器只允许顶层 dialog（top layer）由 body 直接托管。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 将
<dialog id="myDialog">放在<body>最外层，紧贴</body>前 - 避免用 Vue/React 的 portal 封装后插入到非 body 节点（如某个组件 div 内），需确保最终 DOM 位置是
document.body下一级 - 可用
console.log(myDialog.parentElement === document.body)快速验证
showModal() 后必须手动调用 close()，否则 dialog 不会消失
showModal() 不像 alert() 那样自带确定按钮逻辑；它只打开并锁定，关闭完全依赖开发者显式调用 close()。点击遮罩层、按 Esc 键默认有效，但前提是 dialog 没被设为 open 属性（即没用 show() 或手动加 open）且未阻止默认行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给 dialog 内部“确认”按钮绑定
click事件，执行myDialog.close() - 监听
close事件获取关闭原因：myDialog.addEventListener('close', () => console.log(myDialog.returnValue))，returnValue是调用close('confirmed')时传入的字符串 - 避免在
close事件里再调用close()，会触发重复事件或警告
Chrome/Firefox 支持良好，但 Safari 15.4+ 才开始支持 showModal()
Safari 15.3 及更早版本调用 showModal() 会抛出 TypeError: dialog.showModal is not a function。即使检测了 'showModal' in HTMLDialogElement.prototype，旧 Safari 也可能返回 true 却实际不可用（bug 行为）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 生产环境务必做运行时 fallback：检查
typeof dialog.showModal === 'function'，不支持时改用dialog.show()+ 手动加 backdrop + 焦点管理 - 不要只靠 CSS 特性检测（如
@supports (display: dialog)），它不反映showModal是否可用 - 移动端 iOS Safari 16.4+ 才完整支持键盘交互（如 Tab 切换、Esc 关闭），低版本需额外 polyfill 焦点逻辑
