模态框定位和遮罩层实现的核心是遮罩层全屏覆盖、模态框居中显示、阻止背景滚动；遮罩层用position: fixed全屏覆盖并设透明背景，模态框用top: 50%; left: 50%; transform: translate(-50%, -50%)居中，JS控制显隐时需同步设置body overflow隐藏与恢复，并处理Esc键、点击遮罩关闭及可访问性焦点管理。
模态框的定位和遮罩层实现，核心在于遮罩层全屏覆盖 + 模态框居中显示 + 阻止背景滚动。不需要依赖框架，纯 CSS + JS 就能稳定控制。
遮罩层：全屏、半透明、固定定位
遮罩层（overlay）必须覆盖整个可视区域，不受页面滚动影响：
- 用
position: fixed，配合top: 0; left: 0; width: 100vw; height: 100vh; - 设置背景色和透明度，如
background-color: rgba(0, 0, 0, 0.6); - 加
z-index确保在内容之上（如z-index: 1000;），但低于模态框本身 - 可选：加
pointer-events: auto;保证点击穿透到模态框或关闭区域
模态框：居中 + 相对遮罩层定位
模态框（modal）应相对于遮罩层居中，且自身有明确尺寸和层级：
- 推荐用
position: fixed（不依赖父容器），配合top: 50%; left: 50%; transform: translate(-50%, -50%);精准居中 - 设置显式宽高（如
width: 90%; max-width: 500px;）并加z-index: 1001;（比遮罩层高） - 加
box-shadow和圆角提升视觉层次，避免边缘生硬 - 内容区建议设
max-height: 80vh; overflow-y: auto;，防内容过高溢出
交互控制：显示/隐藏 + 滚动锁定
JS 控制显隐时，需同步处理体验细节：
立即学习“Java免费学习笔记（深入）”；
- 显示模态框时，给
加style="overflow: hidden;"，防止背景滚动 - 隐藏时记得恢复
body.style.overflow = '' - 点击遮罩层空白处关闭：监听 overlay 的
click，检查e.target === overlay再关闭 - 按 Esc 键关闭：
document.addEventListener('keydown', e => e.key === 'Escape' && closeModal())
可访问性补充（重要但易忽略）
基础功能之外，加几行代码就能显著提升可用性：
- 模态框打开时，用
focus()将焦点移到第一个可聚焦元素（如标题或首个 input） - 限制 Tab 键只在模态框内循环：监听
keydown，捕获 Tab 并手动跳转到首/尾可聚焦元素 - 给模态框加
role="dialog"和aria-modal="true"，屏幕阅读器会自动暂停读取背景内容
基本上就这些。定位靠 fixed + transform，遮罩靠全屏 fixed + 透明背景，交互靠 body 锁定 + 键盘/点击事件。不复杂但容易忽略滚动锁定和焦点管理。
