元素必须调用 showModal() 或 show() 才能显示，其 open 属性为只读，手动添加仅触发初始显示但丧失模态能力；showModal() 实现真正模态（禁背景交互、支持 Esc/点击 backdrop 关闭），show() 为非模态；关闭须调用 close()，不可仅操作 open 属性；Safari 15.4 前不支持 showModal()，需运行时检测并降级；点击 backdrop 关闭需手动监听 dialog 的 click 事件并判断 e.target === dialog。
dialog 元素必须配合 showModal() 或 show() 才能显示
HTML5 的 <dialog></dialog> 默认是隐藏的，即使写在 HTML 里也不会自动弹出。它不像 <div> 那样靠 CSS 控制显隐，而是有独立的显示/隐藏生命周期。不调用 JS 方法，<code>display: block 也无效。
常见错误是只写 HTML 结构，然后以为加个 open 属性就能弹窗——其实 open 是只读属性，只能由浏览器内部设置（比如调用 showModal() 后自动加上），手动写 <dialog open></dialog> 虽然能触发初始显示，但会失去模态拦截能力（比如背景点击不关闭、Esc 不响应）。
-
showModal()：真正模态，禁用背景交互，支持 Esc 关闭、点击 backdrop 关闭（需显式设置clickOutsideToClose行为，但原生不直接支持，得自己监听event.target === dialog） -
show()：非模态，背景仍可操作，适合工具提示类浮层 - 关闭必须调用
close()，不能仅靠移除open属性或设open = false
<dialog id="myDialog">
<p>这是对话框内容</p>
<button id="closeBtn">关闭</button>
</dialog>
<button id="openBtn">打开</button>
<script>
const dialog = document.getElementById('myDialog');
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');
openBtn.addEventListener('click', () => dialog.showModal());
closeBtn.addEventListener('click', () => dialog.close());
</script>
HTML4 时代没有 <dialog></dialog>，全靠 <div> + CSS + JS 模拟
<p>那时候要实现“弹窗”，本质是手动控制一个 <code><div> 的定位、层级、显隐和交互逻辑。核心三件套：遮罩层（backdrop）、内容容器、JS 控制开关。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>关键难点不在结构，而在行为模拟：</p>
<ul>
<li>模态拦截：需要给 <code>body 加 overflow: hidden 防止滚动穿透
focus() 到第一个可交互元素，关闭后恢复原焦点keydown，判断 event.key === 'Escape'
event.target === backdrop 判断）jQuery UI、Bootstrap 2/3 的 $.modal() 或 $('#modal').modal() 底层都是这套逻辑封装。现在看代码冗长，但当时是标准解法。
<dialog></dialog> 的兼容性坑：Safari 直到 15.4 才支持 showModal()
别只查 “dialog 支持情况”——<dialog></dialog> 标签本身 Safari 6 就认识，但 showModal() 方法长期不支持，导致调用即报错 dialog.showModal is not a function。
实际项目中必须做运行时检测：
- 检查方法是否存在：
typeof dialog.showModal === 'function' - 不支持时降级回
<div> 方案（不要用 <code>show()替代，它不是模态） - CSS 回退：用
dialog:not([open]) { display: none; }保证旧浏览器不意外显示 - 监听
click事件在<dialog></dialog>元素上 - 当
event.target === dialog时，说明点的是 backdrop 区域（不是内部子元素） - 此时调用
dialog.close()
CanIUse 数据容易误导，它把标签支持和 API 支持混在一起统计；真实部署前务必在真机 Safari 上测 showModal() 调用是否成功。
点击 backdrop 关闭 <dialog></dialog> 不是默认行为，得自己处理
很多人以为点背景就关，其实原生 <dialog></dialog> 的 backdrop 点击事件不会自动关闭，它只是渲染一层半透明灰幕，事件仍会冒泡到 body。必须手动监听并判断点击位置：
注意：不要监听 document 或 body，否则无法区分是点 backdrop 还是点页面其他地方；也不要依赖 event.clientX / event.clientY 去算坐标，太重且易出错。
dialog.addEventListener('click', (e) => {
if (e.target === dialog) {
dialog.close();
}
});
原生 <dialog></dialog> 看似简单，但模态行为、焦点、键盘、点击区域这些细节，每个都得亲手补全。HTML4 那套 <div> 方案反而更可控——因为所有逻辑都在你手里，没黑盒。</div>
