遮罩层弹窗表单的核心是用半透明全屏div覆盖页面并居中显示表单，关闭时隐藏遮罩、恢复滚动与焦点；需设置fixed定位、rgba背景、高z-index、键盘Esc响应、焦点管理及可访问性属性。
遮罩层弹窗表单的核心是用一个半透明全屏 div 覆盖页面，再在其上居中显示表单内容；关闭时隐藏遮罩及表单，同时恢复页面滚动和焦点控制。
遮罩层结构与基础样式
遮罩层需覆盖整个视口、禁止底层交互、视觉上明显但不刺眼：
- 遮罩
<div id="overlay">设置position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; - 添加背景色与透明度：
background-color: rgba(0, 0, 0, 0.6); - 关键：加
z-index: 1000;确保在所有内容之上（数值需高于页面其他元素） - 默认设为
display: none;，点击按钮后改为display: flex;或display: block;并配合justify-content: center; align-items: center;居中弹窗
弹窗表单的布局与交互要点
表单容器应置于遮罩内部，具备可关闭性与键盘支持：
- 表单
<div class="modal">设固定宽高或自适应，加白色背景、圆角、阴影增强层次感 - 顶部加关闭按钮（× 或 “关闭” 文字），绑定
click事件调用关闭函数 - 点击遮罩层空白区域（非表单本身）也应关闭弹窗：
event.target === overlay时触发关闭 - 按 Esc 键关闭：监听
document.addEventListener('keydown', e => e.key === 'Escape' && closeOverlay())
打开与关闭的 JavaScript 控制逻辑
用简洁函数管理状态，避免重复操作和内存泄漏：
立即学习“前端免费学习笔记（深入）”；
- 打开：设置
overlay.style.display = 'flex';，同时document.body.style.overflow = 'hidden';防止背景滚动 - 关闭：还原
display为'none'，并恢复body.style.overflow = ''; - 确保关闭函数统一执行，避免多次绑定事件——打开前先解绑旧的
keydown监听器，再重新绑定 - 表单提交后，无论成功失败都应主动调用关闭函数，防止用户误留在弹窗中
可访问性与细节优化
让弹窗对键盘用户和屏幕阅读器友好：
- 弹出时将焦点移到表单第一个可聚焦元素（如
input或关闭按钮），用element.focus() - 关闭后把焦点移回触发弹窗的按钮（保存原按钮引用），保持导航连续性
- 为遮罩层添加
aria-hidden="true"，弹窗添加role="dialog" aria-modal="true"和aria-labelledby - 移动端注意：遮罩层需设
touch-action: none;防止 iOS 滚动穿透
