dialog元素可原生实现模态框，支持遮罩、焦点捕获和ESC关闭，但Safari 15.4+才完全支持，旧版需降级为div+aria-modal；基础用法含showModal()、close()及必要CSS样式。
用 dialog 元素实现原生模态框，但要注意浏览器兼容性
现代 HTML 原生支持模态框，核心就是 dialog 元素。它自带遮罩层、焦点捕获和 ESC 关闭逻辑，不用写 CSS 遮罩或 JS 拦截 Tab 键。
但注意：dialog 在 Safari 15.4+ 才完全支持，旧版 Safari 和 IE 完全不支持。如果你的用户里有大量 macOS / iOS 老系统用户，得加降级方案。
基础用法：
<dialog id="myDialog">
<p>这是弹窗内容</p>
<button onclick="this.closest('dialog').close()">关闭</button>
</dialog>
<p><button onclick="document.getElementById('myDialog').showModal()">打开弹窗</button>立即学习“前端免费学习笔记（深入）”；
关键点：
-
showModal()会自动添加 backdrop（半透明遮罩），且禁用背景滚动 -
close()触发close事件，可监听做清理；直接调用remove()会丢失状态 - 默认无样式，必须手动加 CSS，比如
dialog { border: none; padding: 20px; } - 在 Firefox 中，
dialog默认居中；Chrome/Safari 需要dialog::backdrop { background: rgba(0,0,0,0.5); }显式设置遮罩色
不支持 dialog 时，用 div + aria-modal 模拟
当需要兼容老浏览器（尤其是 Safari
结构要点：
- 遮罩层
div必须紧跟body后，z-index 高于页面其他内容 - 弹窗容器加
role="dialog"和aria-modal="true" - 打开时用 JS 设置
document.body.style.overflow = 'hidden'禁用滚动 - 必须手动监听
keydown：ESC 关闭、Tab 键在弹窗内循环（不能跳到背景元素）
Tab 循环示例逻辑（简化）：
const focusable = dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const first = focusable[0];
const last = focusable[focusable.length - 1];
<p>dialog.addEventListener('keydown', e => {
if (e.key === 'Tab') {
if (e.shiftKey && document.activeElement === first) {
e.preventDefault(); last.focus();
} else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault(); first.focus();
}
}
});
position: fixed 遮罩层常见错位问题
很多人用 div.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }，结果在 iOS Safari 或某些安卓 WebView 里遮罩不覆盖整个可视区——尤其页面有横向滚动或缩放时。
根本原因是 fixed 在某些环境下相对的是 viewport，但页面 zoom 或 overflow-x: hidden 缺失会导致计算偏差。
更稳的写法：
- 遮罩层用
position: fixed; inset: 0;（比top/left/right/bottom: 0更简洁，兼容性同级） - 确保
html, body { height: 100%; margin: 0; }，否则高度可能塌陷 - 如果页面本身有
transform（如轮播图动画），会创建新的 containing block，导致fixed相对它定位——这时只能改用position: absolute并监听scroll动态更新位置（代价高，尽量避免）
键盘与屏幕阅读器可访问性常被忽略的细节
一个“能点开、能关掉”的弹窗不等于可访问。WCAG 要求模态框必须满足三项：
- 打开时，焦点必须立即进入弹窗（通常是第一个可聚焦元素），不能留在触发按钮上
- 关闭后，焦点必须回到触发按钮（不是
body或首屏元素） - 弹窗内容需有明确的
aria-labelledby或aria-label，否则屏幕阅读器只读“dialog”，不读内容
例如：
<dialog aria-labelledby="dialogTitle"> <h3 id="dialogTitle">确认删除？</h3> <p>该操作不可撤销</p> <button>确定</button> </dialog>
最后提醒一句：别为了“原生”硬用 dialog，如果项目要支持微信内置浏览器（X5 内核）或钉钉旧版，它基本等于不可用——这时候老老实实手写，把焦点管理和语义属性做扎实，反而更可靠。
