dialog.showmodal() 是唯一能触发完整模态行为的方法；其他方式如 show()、设 open 属性或 html 中写 open 均无法启用遮罩、焦点锁定、esc 关闭等模态特性，且需运行时检测 api 支持并降级处理。
dialog.showModal() 是唯一能触发模态弹窗的方法
写了 <dialog></dialog> 标签但页面没出现弹窗？不是 CSS 没生效，是根本没“启动”——<dialog></dialog> 默认 display: none，且不参与布局计算。光加 open 属性或写个 <dialog open></dialog> 只会让它初始可见，但仍是非模态：无遮罩、不锁焦点、Esc 不响应。
真正启用完整模态链路（背景禁用、焦点锁定、Esc 关闭、::backdrop 渲染）的，只有 showModal()。其他方式都不行：
-
show()：只显示浮动层，无 backdrop，不拦截滚动，键盘用户可随意切到背景 -
dialog.open = true：无效，open是只读属性，赋值不会触发任何行为 - 直接在 HTML 里写
open：等价于初始调用show()，不是showModal()
调用前必须确保 DOM 就绪，否则 document.querySelector('dialog') 返回 null，报错 Cannot read property 'showModal' of null。
点击遮罩关闭必须手动监听，且 Safari 要降级处理
原生 <dialog></dialog> 不提供“点击遮罩自动关闭”的默认行为。即使调用了 showModal()，点击灰色区域也不会关——这是和多数 JS 弹窗库最明显的区别。
Chrome/Edge 可用简单判断：
dialog.addEventListener('click', e => {
if (e.target === dialog) dialog.close();
});
但 Safari（15.4–17.6）中 e.target === dialog 在点击 backdrop 时基本不可靠，因为 backdrop 不是真实 DOM 节点，事件路径不一致。稳妥做法是坐标判断：
dialog.addEventListener('click', e => {
const rect = dialog.getBoundingClientRect();
if (
e.clientX rect.right ||
e.clientY rect.bottom
) {
dialog.close();
}
});
注意：show() 根本没有 backdrop，这段逻辑完全无效；别试图给 dialog::backdrop 绑事件——它是伪元素，不能监听。
样式重置和 backdrop 补全是跨浏览器一致显示的前提
不同浏览器对 <dialog></dialog> 的默认样式差异极大：Chrome 加了 16px margin，Safari 可能偏移、无圆角、甚至文字色继承父级导致不可读。不重置就容易布局错乱或内容被裁剪。
至少要加这些基础样式：
dialog {
margin: 0;
padding: 1em;
border: none;
border-radius: 8px;
background: #fff;
color: #333;
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
关键点：
-
dialog::backdrop仅对showModal()生效，show()不触发 - Firefox 目前完全不渲染
::backdrop（只支持逻辑阻塞），需靠 JS 降级插入 div 遮罩 - 移动端必须加
max-width: 90vw; max-height: 90vh;，否则可能溢出屏幕 - 父容器有
transform、will-change或overflow: hidden，会导致 backdrop 被截断或定位偏移
兼容性检测不能只靠 @supports，运行时检查才可靠
@supports (display: dialog) 只能判断语法是否识别，无法确认 showModal() 方法是否存在。iOS Safari 15.2–15.3 支持标签但 showModal() 有 focus 锁定失效问题；Android WebView 旧版本也常缺失关键能力。
安全的运行时检测写法是：
if (
typeof HTMLDialogElement !== 'undefined' &&
'showModal' in HTMLDialogElement.prototype
) {
dialog.showModal();
} else {
// 降级：插入 fixed + z-index 的 div，手动管理焦点、Esc、backdrop
// 不要只隐藏原生 dialog 并 show 一个 div——那等于重写整个弹窗逻辑
}
真正难的不是让弹窗“出现”，而是让它在各种设备、辅助技术、键盘操作路径下都可感知、可操作。焦点回到触发按钮、aria-modal 设置、首个可聚焦元素自动获得焦点……这些细节漏掉一个，生产环境就容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
