模态弹窗不必强制用position: fixed，但绝大多数场景必须用它；因absolute受父容器transform、perspective或overflow影响易错位或被裁剪，而fixed脱离文档流、锚定视口，定位最稳定。
模态弹窗必须用 position: fixed 吗？
不是必须，但几乎都用。用 position: absolute 会受限于父容器的 transform、perspective 或 overflow，导致遮罩层错位或弹窗被裁剪。而 position: fixed 脱离文档流，始终相对于视口定位，是可靠选择。
实操建议：
- 弹窗容器（如
<div class="modal">）设position: fixed+top: 0+left: 0+width: 100vw+height: 100vh - 内部内容盒子（
<div class="modal-content">）用margin: auto居中，或更稳妥地用display: flex+justify-content: center+align-items: center - 避免给
html或body加overflow: hidden来防滚动——这会导致焦点丢失、键盘导航中断；应只对body加overflow: hidden且仅在弹窗打开时动态添加
点击遮罩层关闭弹窗，为什么 event.target === modal 不总成立？
因为点击事件冒泡，如果用户点的是弹窗内的按钮、输入框甚至空格，event.target 就是那个子元素，不是最外层 modal 容器。
安全做法是检查 event.target 是否为遮罩层本身，而不是整个模态框：
立即学习“前端免费学习笔记（深入）”；
modal.addEventListener('click', (e) => {
if (e.target === modal) {
closeModal();
}
});
或者更健壮：用 e.target.classList.contains('modal-overlay')，前提是遮罩层是独立元素（推荐）。
常见错误现象：
- 弹窗内点击任意位置都关闭 → 忘了加
e.stopPropagation()到内容区 - 按 Esc 关闭后，再点遮罩不响应 → 没重置焦点或没清空事件监听器
- 移动端点不到遮罩层 → 遮罩层
height不足或缺少min-height: 100vh
如何让弹窗支持键盘操作（Esc、Tab 循环）？
无障碍和可用性刚需。只靠 CSS 和 HTML 不够，必须补 JS 行为。
关键动作：
- 打开时，用
modal.focus()或聚焦第一个可交互子元素（如modal.querySelector('button, input, [href]')） - 监听
keydown：当e.key === 'Escape'时关闭 - 实现 Tab 循环：捕获
Tab键，若焦点即将移出弹窗，则手动跳回第一个/最后一个可聚焦元素 - 关闭后，把焦点还给触发弹窗的按钮（需提前缓存
document.activeElement）
性能注意点：不要在每次 keydown 里重复查 DOM；缓存可聚焦元素列表，用 Array.from(modal.querySelectorAll(...)) 一次获取。
用 dialog 元素比手写更简单？哪些浏览器不支持？
是的，<dialog> 原生支持 showModal()、close()、Esc 关闭、焦点限制、 backdrop 样式，代码量少一半。但它有兼容性硬伤：
不支持的场景：
- Safari ≤ 15.6（macOS Monterey 及更早）完全不支持
<dialog> - Android WebView（Chrome ≤ 105）需开启实验性 flag 才生效
- IE 全系不支持
如果你的项目需兼容 Safari 15 或企业内网旧环境，别直接用 <dialog>；否则，搭配 @supports (display: dialog) CSS 和轻量 polyfill（如 dialog-polyfill）是合理折中。
容易被忽略的一点：原生 <dialog> 的 backdrop 默认不可聚焦、无语义角色，屏幕阅读器支持仍弱于手写结构；若需 WCAG AA 级合规，仍建议手写并显式加 role="dialog"、aria-modal="true"、aria-labelledby。
