原生 HTML+CSS+JS 可实现轻量模态框：用 position:fixed 容器、z-index 分层遮罩与内容、display/visibility 控制显隐；需监听 Escape 键和遮罩点击（e.target===e.currentTarget）、禁用背景滚动、焦点管理（自动聚焦首个可交互元素、Tab 循环、关闭后恢复触发源焦点）、支持 innerHTML 动态内容（注意 XSS）、aria-modal=”true” 提升可访问性。
怎么用原生 HTML + CSS + JS 实现一个轻量模态框
不用框架也能做，关键是控制 display 或 visibility + 背景遮罩 + focus 锁定。最简结构只需要一个 div 容器、一个遮罩层、一个内容区，再加几行 JS 控制显隐。
常见错误是直接用 alert() 或 prompt() —— 它们无法自定义样式、不能嵌入 HTML 内容、会阻塞主线程，不适合现代页面交互。
- 模态框容器建议用
position: fixed，避免受父元素overflow影响而被裁剪 - 遮罩层
z-index要比页面其他内容高，但低于模态框主体（比如遮罩z-index: 100，内容框z-index: 101） - 必须监听
Escape键和点击遮罩关闭，否则可访问性不达标 - 打开时记得
document.body.style.overflow = 'hidden'，防止背景滚动
如何让模态框支持任意 HTML 内容（非纯文本）
别用 innerText 或 textContent 填充内容，它们会转义标签；改用 innerHTML，但要确保内容可信（避免 XSS）。如果内容来自用户输入，得先做 HTML 清洗或改用纯文本渲染。
推荐做法：把模态框结构写死在 HTML 中，用 data-* 属性标记不同弹窗的模板，JS 根据触发元素的 data-target 找到对应内容并显示：
立即学习 “ 前端免费学习笔记（深入）”；
然后 JS 用 document.querySelector(`#${target}`) 拿到节点，appendChild 到模态框内容区即可。
为什么 点击模态框外部不关闭？常见 DOM 事件陷阱
典型问题是事件绑定在错误节点上，比如只给「关闭按钮」加 click，却没处理遮罩层或内容框外的点击。更隐蔽的是 事件冒泡 干扰：点击内容区内部按钮，结果触发了外层遮罩的关闭逻辑。
- 正确做法：给遮罩层（
.modal-overlay）绑click，并在 handler 里检查e.target === e.currentTarget，确保点的是遮罩本身，不是它里面的子元素 - 不要对整个
body监听click，容易误关；也不要给模态框内容区设pointer-events: none，这会让里面所有交互失效 - 移动端还要注意
touchstart兼容，iOS Safari 对click有 300ms 延迟，建议统一用pointerdown
模态框打开后键盘焦点丢失或无法 Tab 导航怎么办
这是可访问性硬伤。默认情况下，模态框内元素不会自动获得焦点，Tab 键仍会在背景页面流转，甚至可能跳到地址栏。
- 打开模态框后，立即用
element.focus()聚焦到第一个可交互元素（如第一个input或button） - 实现焦点环限制：监听
keydown，当按Tab且焦点即将移出模态框时，手动将焦点循环回第一个 / 最后一个可聚焦子元素 - 关闭模态框时，必须把焦点还给触发它的那个按钮（存一下
event.target），否则屏幕阅读器用户会迷失上下文 - 加上
aria-modal="true"和role="dialog"，让辅助技术识别这是模态上下文
这些细节不难写，但漏掉任何一个，都可能导致部分用户根本用不了这个弹窗。
