模态框必须用 position: fixed 而非 absolute，以避免滚动偏移或被 overflow: hidden 截断；需设高 z-index（如1050）、全视口覆盖、遮罩 pointer-events: none、内容 pointer-events: auto；关闭逻辑须统一处理点击遮罩、Esc 键和 close() 调用，注意 preventDefault、事件监听清理及 body 滚动控制；显隐应使用 opacity/visibility 过渡而非 display: none，确保无障碍与动画稳定。
模态框必须用 position: fixed 而不是 absolute
用 absolute 会导致弹窗随页面滚动而偏移，或被父级 overflow: hidden 截断。固定定位才能真正“浮在顶层”。同时要确保 z-index 足够高（比如 1050），并避免被第三方 UI 库（如 Bootstrap 的 1040）覆盖。
关键样式要点：
-
top: 0、left: 0、width: 100vw、height: 100vh覆盖整个视口 - 背景遮罩层（
.modal-backdrop）需设background-color: rgba(0,0,0,0.5)，且不响应鼠标事件（pointer-events: none） - 内容容器（
.modal-content）加pointer-events: auto，否则点击无效
关闭逻辑要同时处理三种触发方式：点击遮罩、按 Esc、调用 close() 方法
只监听 click 或只监听 keydown 都不完整。真实项目中用户可能任意组合操作，必须统一收口到一个关闭函数。
常见疏漏点：
立即学习“Java免费学习笔记（深入）”；
- 未在
Esc事件中preventDefault()，导致页面意外滚动 - 遮罩层
click事件绑定在document上而非具体元素，造成多次绑定（尤其组件重复初始化时） - 关闭后未清除
keydown监听器，内存泄漏风险
function closeModal() {
modalEl.classList.remove('show');
document.body.classList.remove('modal-open');
document.removeEventListener('keydown', handleEscape);
}
function handleEscape(e) {
if (e.key === 'Escape') {
e.preventDefault();
closeModal();
}
}
modalBackdrop.addEventListener('click', closeModal);
document.addEventListener('keydown', handleEscape);
组件初始化时需禁用 body 滚动，但不能影响嵌套滚动容器
直接设 document.body.style.overflow = 'hidden' 会破坏内部 overflow-y: auto 的区域（比如长列表弹窗）。正确做法是仅添加 modal-open class，并用 CSS 控制：
body.modal-open {
overflow: hidden;
}
body.modal-open .modal-content > .scrollable-area {
overflow-y: auto;
}
这样既阻止了背景滚动，又保留了弹窗内可滚动区域的交互能力。若弹窗内容动态加载，记得在 show() 后调用 focus() 到第一个可聚焦元素（如标题或确认按钮），满足无障碍访问要求。
不要用 display: none 控制显隐，改用 opacity + visibility + 过渡动画
display: none 会让元素完全脱离渲染流，导致 transition 失效、焦点管理中断、屏幕阅读器无法平滑感知状态变化。
推荐状态切换方案：
- 隐藏态：
opacity: 0、visibility: hidden、pointer-events: none - 显示中：
opacity: 1、visibility: visible、pointer-events: auto - CSS 中定义
transition: opacity 0.15s ease，比 JS 控制帧率更稳定
动画结束后再移除 DOM 或重置状态，避免用户看到“闪一下”或焦点丢失。
复杂点在于多层模态框叠加时的z-index 管理和焦点环穿透控制，这通常需要维护一个栈式实例队列，而不是简单写死数值。 
