showModal()是唯一能触发完整模态行为的调用方式，必须调用才能激活遮罩、焦点锁定、Esc响应等；仅写标签、设open属性或调用show()均无效，且需确保DOM就绪、避免CSS干扰、手动处理backdrop点击关闭逻辑。
直接调用 showModal() 就能阻止外部元素被点击——这是唯一有效方式，其他写法（比如只设 open 属性、用 show()、或靠 CSS 控制显示）都不行。
为什么 showModal() 是唯一可靠入口
浏览器对 <dialog> 的模态行为完全绑定在 showModal() 上：它会自动禁用背景交互、捕获焦点、挂载 ::backdrop 并响应 Esc。不走这个方法，<dialog> 就只是个普通块级元素，和 <div> 没区别。
-
show()不加遮罩、不限制 tab 键、不阻止 click，纯属“视觉弹出”，实际无模态意义 - 只写
<dialog open>会让元素可见，但::backdrop不渲染、Esc 无效、点击 backdrop 无反应 - 任何通过
display: block或visibility: visible强行显示的尝试，都会绕过浏览器模态栈，导致焦点逃逸和穿透点击
移动端关闭后意外触发底层 click 怎么办
这是 touch 事件链固有行为：用户 touch 关闭对话框后，浏览器仍会发出一次延迟的合成 click，目标是下方被遮挡的按钮（比如打开它的那个 <button>），造成“点一下关了又开”的循环。
- 在
dialog元素上监听touchstart并立即调用e.preventDefault()，这是唯一能切断事件链源头的方式 - 不要在
pointerdown里preventDefault()——它对合成 click 无效 - 不要依赖
stopPropagation()，这不是冒泡问题，而是浏览器自动生成的独立事件 - 旧版 Safari（user-select: none 和
cursor: none辅助防误触
dialog 必须是 <body> 的直接子元素
如果 <dialog> 嵌套在 transform 容器、position: relative 父级、Flex/Grid 布局内，或 Shadow DOM 中，Safari 和部分 Chrome 版本会出现 backdrop 错位、Esc 失效、焦点无法锁定等问题。
立即学习“前端免费学习笔记（深入）”；
- DOM 结构必须是：
<body><dialog>...</dialog></body>，中间不能有任何父容器 - 不能给
<dialog>自身设position: absolute或transform，否则 backdrop 渲染坐标偏移 -
dialog::backdrop必须显式设置背景色（如background: rgba(0,0,0,0.5)），Chrome/Safari 默认透明，Firefox 虽有默认色但不可控
点击 backdrop 不会自动 close？得自己监听
规范明确要求点击 backdrop 不触发 close() ——它只是视觉层，没有交互语义。所以你必须手动监听并判断点击是否落在 backdrop 区域。
- 基础写法：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari 15.4–16.3 存在
e.target恒为body的 bug，此时需改用坐标判断：if (e.clientX = window.innerWidth || e.clientY >= window.innerHeight) - 别写
oncancel="event.preventDefault()"，这会同时禁掉 Esc 和 backdrop 点击，彻底锁死退出路径
真正难的不是写几行 JS，而是理解 showModal() 不只是一个方法，它是整个模态生命周期的开关；一旦结构、样式或事件绑定偏离规范，所有“阻止点击”的预期就会立刻失效。
