showmodal()是使成为可用模态弹窗的唯一方式；光写标签、加open属性或调用show()均无效，因不锁背景、不响应esc、点击遮罩也不关闭；调用后仍不可见主因是dom未就绪、元素未正确选中、父容器css干扰或open属性被误删。
showModal() 是让 <dialog></dialog> 真正变成可用模态弹窗的唯一方式，光写标签、加 open 属性或调用 show() 都不行——它不会锁背景、不响应 Esc、点击遮罩也不关，等于白写。
为什么调用了 showModal() 还是看不到弹窗？
最常见原因是 DOM 没就绪或元素没选中对。不是代码错，是时机或路径问题。
- 脚本执行早于
<dialog></dialog>插入 DOM：比如在里执行document.querySelector('dialog').showModal()，返回null，报Cannot read property 'showModal' of null -
<dialog></dialog>不在直接子级：嵌套在<div class="wrapper"> 里时，Safari 和部分 Chrome 版本下 <code>::backdrop渲染失败，遮罩不出现 - CSS 干扰定位：父容器有
transform、will-change或overflow: hidden，会导致弹窗偏移、裁剪甚至不可见 - 手动删了
open属性：showModal()会自动加open，但如果你后续写了dialog.removeAttribute('open')，弹窗就“消失”了（DOM 还在，只是被浏览器判定为未激活） - Chrome/Edge 120+ 可用：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari 15.4–17.6 必须降级：监听
click后用坐标判断，例如检查e.clientX是否落在dialog.getBoundingClientRect()范围外 - 别用
dialog::backdrop绑定事件：它纯属样式伪元素，无法 attach listener，也不能读状态 - 如果用了
show()，压根没有 backdrop，此逻辑直接无效 - 按钮必须带
value属性：<button value="confirm">确定</button>，这个value才会成为dialog.returnValue - 禁止
event.preventDefault()或onsubmit="return false"：它们会拦截method="dialog"的默认关闭行为 -
dialog.returnValue在 Chrome/Firefox/Edge 中可用，Safari（截至 v17.6）始终返回空字符串，不能依赖它传值 - 关闭后焦点不会自动回到触发按钮，需手动调用
triggerBtn.focus()，否则键盘用户卡住
点击遮罩关闭弹窗的兼容写法
原生 <dialog></dialog> 不提供点击遮罩自动关闭，且 Safari 中 e.target === dialog 判断基本失效——因为 backdrop 不是真实节点，事件路径不可靠。
method="dialog" 表单提交后怎么安全关闭并传值？
这是最简洁的原生路径，但细节不处理好，returnValue 就拿不到，或者关不了。
真正难的不是调用 showModal()，而是 Safari 的三件事：backdrop 渲染异常、returnValue 不可用、焦点管理错乱——它们不报错，但会让交互断掉，而且只在真机上暴露。
