最简原生弹窗需控制div显隐、管理焦点、防重复提交、适配移动端键盘及保障可访问性。核心是display:none切换、tabindex="-1"捕获焦点、esc关闭、submit阻止默认、fetch提交、scrollintoview修复ios键盘问题、关闭后requestanimationframe恢复触发按钮焦点。
点击按钮触发弹窗，用原生 HTML + JavaScript 最简实现
不用框架、不引入第三方库，纯前端就能跑通。核心是控制一个 div 的显示/隐藏状态，再配合表单提交逻辑。关键不是“怎么画弹窗”，而是“怎么让它真正可用”——比如点击遮罩层不关闭、按 Esc 无响应、表单没校验就提交，这些才是实际开发中卡住人的点。
推荐结构：div 包裹整个弹窗（含遮罩层），设 display: none 初始隐藏；用 document.getElementById().style.display = "block" 控制显隐。别用 visibility: hidden 或 opacity: 0，它们仍占布局流，且无法阻止键盘焦点穿透。
- 给弹窗
div加tabindex="-1"，确保首次打开时能用focus()捕获焦点，避免用户 Tab 键跳到背景页面去 - 绑定
keydown监听，判断e.key === "Escape"后调用关闭函数 - 遮罩层（
div.overlay）必须写在弹窗内部或同级且 z-index 更高，否则 iOS Safari 下点击无效
表单提交不跳转页面，用 fetch 提交数据并清空字段
弹窗里表单的 submit 事件默认会刷新页面，必须 e.preventDefault()。提交后要立刻反馈结果，而不是等几秒才关弹窗——用户不知道后台有没有收到。
示例中后端接口假设为 /api/items，返回 JSON：{"success": true, "id": 123}。注意 fetch 默认不带 cookie，如需登录态，得加 credentials: "include"。
- 提交前禁用提交按钮（
btn.disabled = true），防止重复点击 - 成功后清空所有
input和textarea的value，别只清innerHTML - 失败时把错误信息（如
response.statusText或后端返回的message）显示在弹窗内指定span.error元素里，别只 console.log
移动端弹窗适配：iOS 键盘顶起、安卓软键盘遮挡输入框
在 iPhone 上，聚焦 input 时系统键盘弹出，常把输入框顶出可视区，用户看不到自己在输什么。这不是 bug，是 Safari 的默认行为，但可以绕过。
最稳做法：监听 focus 事件，在 setTimeout 中滚动到该元素顶部（el.scrollIntoView({ block: "center" })）。别用 scrollIntoView({ behavior: "smooth" })，iOS 15 以下不支持平滑滚动，会静默失败。
- 避免给弹窗容器设
position: fixed同时又设height: 100vh——Safari 的vh在键盘弹出时不会重算，导致底部被截 - 安卓部分机型（如三星）软键盘会压缩视口，可临时改
body的height为100%防止内容塌陷 - 所有输入框必须有
type属性（如type="text"、type="email"），否则 iOS 不触发对应键盘类型
关闭弹窗后焦点回到触发按钮，保持可访问性
用户用键盘操作时，关闭弹窗后焦点如果落在页面顶部或消失，下一次 Tab 就会断掉。必须手动把焦点还回去。
做法很简单：打开弹窗时，先记录触发按钮（const opener = e.target），关闭时执行 opener.focus()。但要注意时机——如果弹窗是 display: none，恢复显示后需等一帧再 focus，否则部分浏览器不生效。
- 用
requestAnimationFrame(() => opener.focus())比setTimeout更精准 - 如果触发元素是
button，确保它有type="button"，否则在表单内可能意外触发表单提交 - 别在关闭动画（CSS transition）完成前就 focus，动画未结束时元素可能还没脱离 tabindex 流
弹窗真正的难点不在样式，而在焦点管理、键盘交互、表单状态同步这三块。漏掉任意一个，对键盘用户或屏幕阅读器用户就是不可用的。写完先拔掉鼠标，只用 Tab 和 Enter 走一遍流程，比看十遍代码都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
