真正可配置的全局弹窗是一个轻量级js模块，用函数封装行为、对象承载配置，支持状态管理、焦点锁定、异步处理、降级兼容及移动端适配。
不能靠单个 div + display: none 硬切就叫“全局控制系统”——它缺乏状态管理、无法复用配置、不处理焦点逃逸、也不支持异步加载和错误反馈。真正可配置的全局弹窗，本质是一个轻量级的 JS 模块，用函数封装行为，用对象承载配置。
用单例模块封装弹窗逻辑，而不是分散写 show/hide
每次新开弹窗都手动写 document.getElementById("modal").style.display = "block"，很快就会失控。应该把核心控制收拢到一个导出函数里，比如 showModal()，所有调用都走它。
- 模块内部维护一个
currentDialog引用，避免重复打开或关闭错对象 - 配置项统一通过参数传入：
title、content、onConfirm、onCancel、closeOnBackdropClick等 - 不要在模块里硬编码 DOM 查询，而是接收容器元素（如
document.body）或由调用方提供挂载点 - 返回一个 Promise，resolve 时带操作结果（
{ type: "confirm" }或{ type: "cancel" }），方便链式处理
dialog 元素必须检测支持性并降级，别直接 assume 它可用
<dialog></dialog> 虽语义清晰，但 Safari 15.4 之前、旧版 Edge、部分安卓 WebView 都不支持 showModal()。直接用会白屏或静默失败。
- 运行时检测：
if (!('showModal' in HTMLDialogElement.prototype))，不支持则动态创建div+overlay结构 - 降级方案中，必须手动实现焦点锁定：监听
focusin，发现焦点移出弹窗范围时，立即el.focus()回第一个可聚焦子元素 - 别给降级用的
div加role="dialog"却漏掉aria-modal="true"，否则屏幕阅读器可能读成普通 div - 所有样式（如居中、backdrop）优先用 CSS 实现，JS 只管开关逻辑和状态同步
配置项必须区分「UI 行为」和「业务逻辑」，别混在一起
常见错误是把按钮文案、是否显示取消按钮、是否允许 Esc 关闭这些 UI 控制，和提交后跳转、清空表单、触发 API 这些业务逻辑全塞进一个 config 对象里。
- UI 配置建议固定字段：
title、okText、cancelText、showCancel、closeOnEscape、closeOnBackdropClick - 业务逻辑必须用函数传入：
onConfirm: async () => { const res = await fetch(...); return res.json(); }，且模块内要处理 loading 状态和错误重试提示 - 表单类弹窗需额外支持
formFields配置数组，每个字段含name、type（text/number/select）、label、required，自动生成结构，而非让使用者拼 HTML 字符串 - 所有配置项都要有默认值，比如
closeOnEscape: true、showCancel: true，减少调用方认知负担
移动端键盘顶起、焦点丢失、滚动失效这些不是边缘问题
iOS Safari 下弹窗里 input 聚焦后被键盘顶出可视区，不是 bug，是它的默认渲染策略；安卓部分 WebView 会忽略 scrollIntoView 的 block: "center"。绕不过，只能针对性处理。
- 对弹窗内所有
input、textarea绑定focus事件，在setTimeout(() => el.scrollIntoView({ block: "center" }), 0)中执行滚动 - 禁用
behavior: "smooth"，iOS 15 以下不兼容，会静默失败 - 弹窗容器不要设
height: 100vh，Safari 键盘弹出时vh不重算，导致底部截断；改用min-height: 100dvh（2026 年已广泛支持）或 JS 动态计算innerHeight - 关闭弹窗后，必须用
requestAnimationFrame恢复原焦点元素，否则 Tab 键会跳到地址栏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
