Modal类封装单个弹窗生命周期，支持延迟挂载、状态管理与事件绑定；ModalManager以单例模式统一调度，实现栈式队列、层级控制与多实例共存；提供配置化、钩子扩展及继承能力。
用面向对象思想设计一个通用模态框控制中心，核心是把“弹窗”抽象为类，把“打开、关闭、销毁、队列管理”等行为封装成实例方法，同时用静态方法或单例模式统一调度——避免全局变量混乱，支持多实例共存、可配置、可扩展。
定义 Modal 类：封装单个弹窗的生命周期
每个模态框是一个独立实例，持有自己的 DOM 元素、配置项和状态（如是否已挂载、是否正在关闭）。
- 构造函数接收配置对象（title、content、width、maskClosable、onConfirm 等）
- 内部生成结构（遮罩层 + 弹窗容器），但**不立即插入 DOM**，延迟到
show()时挂载 - 提供
show()、hide()、destroy()方法，控制显隐与清理 - 绑定事件时用箭头函数或
bind(this)，确保 this 指向当前实例
实现 ModalManager：统一调度与队列控制
用静态类或单例对象管理所有模态框，解决“多个弹窗叠加”、“后开先关”、“禁止重复打开同一类型”等问题。
- 维护一个
stack数组，按显示顺序存储活跃 Modal 实例 -
open(config)方法：创建新实例 → 推入 stack → 调用show()；若配置含id，可先检查是否已存在并复用/聚焦 -
closeTop()关闭最上层；closeById(id)关闭指定；closeAll()清空 stack 并逐个 hide/destroy - 自动处理遮罩层级：
zIndex = baseZIndex + stack.length * 10
支持可配置与可扩展：插件式增强能力
通过配置项和钩子函数让 Modal 更灵活，比如加载中状态、自定义页脚、异步内容加载。
立即学习“Java免费学习笔记（深入）”；
- 配置项支持函数类型：如
content: () => fetch('/api/info').then(r => r.text())，show()内部自动 resolve - 暴露生命周期钩子：
onBeforeShow、onAfterHide、onDestroy，便于埋点或动画衔接 - 页脚按钮可传入数组：
footer: [{ text: '取消', onClick: () => modal.hide() }, { text: '确认', type: 'primary', onClick: config.onConfirm }] - 继承扩展：写
ConfirmModal extends Modal或AlertModal，复用基础逻辑，只重写模板或默认行为
使用示例：简洁调用，状态解耦
使用者无需操作 DOM，不关心层级或事件清理，只关注“要弹什么”和“用户点了什么”。
// 打开一个确认框
ModalManager.open({
title: '删除确认',
content: '确定要删除这条数据吗？',
footer: [
{ text: '取消' },
{ text: '确定', type: 'danger', onClick: () => api.delete(id).then(() => refresh()) }
]
});
<p>// 打开带加载的异步弹窗
ModalManager.open({
title: '用户详情',
content: () => fetch(<code>/api/user/${id}</code>).then(res => res.json()).then(data =>
<code><p>姓名：${data.name}</p><p>邮箱：${data.email}</p></code>
),
maskClosable: false
});</p> 
