最省事的是直接用现成框架的模态组件，但结构容错率极低：bootstrap 5 需严格三层嵌套（modal → modal-dialog → modal-content）、uikit 依赖 uk-modal 属性全匹配、tailwind 必须搭配 headless ui 并手动添加 backdrop 元素。
直接用现成框架的模态组件最省事，但结构错一点就完全不工作——Bootstrap 要三层嵌套，UIkit 依赖 uk-modal 属性，Tailwind 则必须配 Headless UI 才能补足逻辑。
Bootstrap 5 模态框必须严格套三层结构
外层 div 带 class="modal"，里面必须嵌 modal-dialog，再包一层 modal-content。少一层或 class 名写错（比如写成 modal-content-wrapper），JS 就不触发显示。
-
data-bs-toggle="modal"+data-bs-target="#id"是最稳的触发方式，不用写 JS - 最外层
modal容器必须带tabindex="-1"，否则键盘 Tab 会跳进背景内容 -
modal-dialog在小屏下默认居中但不缩放，长内容要手动加max-height: 80vh; overflow-y: auto; - Backdrop 黑底 z-index 默认是 1050，若页面已有
z-index: 2000的固定导航，得给.modal单独设更高值
UIkit 模态框靠属性驱动，禁用点击关闭需显式配置
它不靠 class 控制行为，而是解析 uk-modal 属性里的键值对。默认点击遮罩关闭、按 Esc 关闭都开启，但一旦想关掉某项，就得写全参数。
- 禁用点击背景关闭：写成
uk-modal="bg-close: false"，只写bg-close: false不加引号或等号会失效 - 全屏模态要加
uk-modal-full类，不能只靠 CSS 改宽高 -
uk-toggle="target: #myModal"的按钮和目标id必须完全一致，大小写、连字符都不能错 - JS 文件必须在 HTML 解析完后加载，否则
uk-modal属性不会被初始化
Tailwind + Headless UI 的 Dialog 必须手动加 backdrop
Tailwind 本身没模态逻辑，@headlessui/react 的 Dialog 只管状态和焦点，视觉层全靠你写。Backdrop 不是组件自动渲染的，漏了就只剩内容悬空。
- Backdrop 必须写在
Dialog外层，且用fixed inset-0 bg-black/50，放在内部会被 Portal 隔离导致 z-index 失效 - 服务端渲染（如 Next.js）首次加载时，
Dialog会报“hydration mismatch”，得用useState(false)+useEffect(() => setMounted(true), [])延迟挂载 -
Dialog.Panel里不能直接用display: none控制显隐——它靠unmount={false}或staticprop 驱动渲染时机 - 移动端 Safari 键盘弹出后
position: fixed常偏移，加transform: translateZ(0)强制硬件加速能缓解
纯 CSS :target 方案适合静态页，但历史记录不可控
用锚点 URL 触发 :target 显示模态框，确实零 JS，但每次打开都会向浏览器历史栈推一条记录，用户狂点返回键可能卡住。
- 关闭只能靠跳转到
#或其他空锚点，无法用按钮事件精细控制 - 无法监听 ESC 键、无法锁定焦点、屏幕阅读器仍会读背景内容，
aria-hidden="true"得手动加在 body 上 - 动画只能靠
transition，不能做 stagger 或条件入场，transform: scale()和opacity得同时过渡，否则闪一下 - 在 SPA（如 Vue Router / React Router）里基本不可用，路由会拦截哈希变化，
:target失效
真正省时间的不是选哪个框架，而是别自己手写 position: fixed + inert + 焦点锁 + ESC 监听——这些细节加起来比引入一个库还费劲。框架的坑都在文档里写着，但没人告诉你 tabindex="-1" 少打个引号就会让整个模态框键盘不可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
