JavaScript实现弹窗与焦点管理技巧

• 打开模态框时，缓存当前焦点元素：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="关闭对话框"

不复杂但容易忽略：每次打开都重置焦点、每次关闭都清理状态、每处交互都考虑键盘与屏幕阅读器。模态框不是“弹出来就行”，而是“弹出来还能被所有人安全使用”。

本篇关于《JavaScript实现弹窗与焦点管理技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！