JavaScript实现模态框需控制显隐、焦点锁定、背景交互及可访问性：使用<dialog>或手动管理DOM，确保Tab键循环聚焦、ESC关闭、遮罩点击防护、body滚动禁用，并添加aria-modal等属性以满足WCAG标准。
JavaScript 实现模态框弹出，核心在于控制 DOM 显示/隐藏、拦截焦点流、阻止背景交互，并确保键盘导航（如 Tab 键）只在模态框内循环。这不是简单 show/hide，而是涉及可访问性（a11y）和用户体验的关键逻辑。
一、基础模态框结构与显隐控制
先确保 HTML 结构合理：模态框（dialog 或 div[role="dialog"]）和半透明遮罩层（div.overlay）应包裹在 body 末尾，避免被其他元素的 z-index 干扰。
推荐使用原生 <dialog> 元素（现代浏览器支持良好），它自带部分行为（如 ESC 关闭、自动聚焦首焦点元素）：
<dialog id="myModal">
<div class="modal-content">
<h2>提示</h2>
<p>这是模态内容</p>
<button id="closeBtn">关闭</button>
</div>
</dialog>
<button id="openBtn">打开模态框</button>
JS 控制显隐：
立即学习“Java免费学习笔记（深入）”；
-
document.getElementById('myModal').showModal()—— 显示并启用模态行为（含焦点锁定） -
document.getElementById('myModal').close()—— 关闭（触发close事件） - 若需兼容旧浏览器，用
classList.add('open')+ CSSdisplay: block或visibility: visible，但需手动补全焦点管理逻辑
二、焦点锁定（Focus Trapping）——防止 Tab 跳出模态框
用户按 Tab 键时，焦点必须在模态框内循环：从第一个可聚焦元素 → 中间 → 最后一个 → 回到第一个（正向），或反向亦然。否则会聚焦到背景按钮，破坏体验且不符合 WCAG 标准。
实现方式（以非 <dialog> 场景为例）：
- 打开模态框时，缓存当前焦点元素：
const prevFocus = document.activeElement - 获取模态框内所有可聚焦元素：
const focusableEls = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])') - 监听
keydown事件，捕获 Tab 键： - 若焦点在最后一个元素且按 Shift+Tab → 阻止默认行为，将焦点设为第一个元素
- 若焦点在第一个元素且按 Tab → 阻止默认行为，将焦点设为最后一个元素
- 关闭模态框后，尝试恢复
prevFocus.focus()（注意判断是否仍存在于 DOM）
三、遮罩层与背景交互控制
遮罩层（overlay）不只是视觉效果，更是交互隔离层：
- 设置
pointer-events: none在遮罩自身上，但通过伪元素或子层承接点击（避免遮罩干扰内部模态框事件） - 点击遮罩层空白处关闭模态框？需谨慎：仅当
event.target === overlay时才关闭，防止误关（比如点击模态框内按钮的冒泡） - 禁用背景滚动：打开时给
body加overflow: hidden；关闭时恢复。注意保存原有scrollY，关闭后可选window.scrollTo(0, savedScroll) - ESC 键关闭：监听
keydown，检测e.key === 'Escape'并调用关闭逻辑
四、可访问性增强细节
让屏幕阅读器正确识别模态框状态：
- 给模态框添加
role="dialog"和aria-modal="true" - 设置
aria-labelledby指向标题元素 ID（如aria-labelledby="modal-title"） - 模态框打开时，用
element.setAttribute('aria-hidden', 'true')隐藏背景主内容（除模态框外的所有兄弟节点） - 确保关闭按钮有明确文本或
aria-label="关闭对话框"
不复杂但容易忽略：每次打开都重置焦点、每次关闭都清理状态、每处交互都考虑键盘与屏幕阅读器。模态框不是“弹出来就行”，而是“弹出来还能被所有人安全使用”。
