modal遮罩层必须用fixed inset-0实现全屏固定，配合bg-black/50和z-50以上层级；内容区需flex居中、max-h-[90vh]滚动；关闭需状态控制、esc监听及body overflow-hidden。
Modal遮罩层必须用fixed且覆盖整个视口
全屏固定遮罩的核心是让背景层脱离文档流、撑满整个屏幕，同时不随滚动条移动。Tailwind里最直接的方式是用 fixed inset-0 —— 它等价于 position: fixed; top: 0; right: 0; bottom: 0; left: 0，比手写 h-screen w-screen 更可靠，尤其在移动端或页面有横向滚动时不会漏边。
常见错误是只加 fixed 却忘了设四边为0，结果遮罩只占内容区高度；或者误用 absolute，导致滚动后遮罩错位。
-
fixed inset-0是必须项，不能省略任何一部分 - 加上
bg-black/50或bg-gray-900/70控制透明度，避免纯黑刺眼 - 务必设置
z-50或更高（如z-50~z-60），确保压在主体内容之上但低于其他全局UI（比如顶部导航栏通常用z-40）
Modal内容需居中且有滚动控制
遮罩有了，里面的内容框还得垂直水平居中、限制最大尺寸、支持内部滚动——否则长内容会溢出屏幕或无法查看。
推荐组合：外层用 flex items-center justify-center min-h-screen p-4（注意不是 h-screen，min-h-screen 防止内容少时遮罩塌陷），内层容器加 max-w-lg w-full max-h-[90vh] overflow-y-auto。
-
items-center justify-center依赖父级flex，所以遮罩层要同时加flex -
max-h-[90vh]比h-[80vh]更安全，内容短时不拉伸，长时可滚动 - 如果 Modal 内含表单，记得加
focus-trap逻辑（Tailwind不处理这个，得靠 JS 库如focus-trap）
关闭按钮和ESC键响应必须手动绑定
Tailwind本身不提供交互逻辑，遮罩的显示/隐藏完全由状态变量控制。很多人以为加了类就自动响应，结果点不了、按不了ESC。
关键点在于：遮罩层是否渲染，取决于一个布尔状态（比如 React 的 isOpen），而关闭动作必须显式触发该状态变更。
- 关闭按钮要绑
onClick={() => setIsOpen(false)}，不能只靠 CSS 类切换 - 监听
keydown事件捕获Escape键，注意检查event.key === 'Escape'，别写成'Esc' - 点击遮罩背景（非内容区）也应关闭，但要防止事件冒泡到内部按钮——给内容区加
onClick={e => e.stopPropagation()}
移动端适配常被忽略的三个细节
在 iPhone Safari 或 Android Chrome 上，全屏 Modal 容易出现滚动穿透、底部安全区遮挡、键盘弹起后定位错乱等问题。
- 打开 Modal 时，给
加overflow-hidden类（用 JS 切换），否则背景仍可滚动 - 内容区顶部加
pt-safe（需启用 Tailwind 的safe-area-insets插件）或手动补pt- env(safe-area-inset-top) - 如果 Modal 内有
<input>，iOS 下键盘弹出会把 Modal 顶上去，此时建议用fixed top-1/2 -translate-y-1/2替代 flex 居中，更稳定
实际项目里，最常卡住的地方不是样式写不对，而是忘记同步控制 body 的滚动、没拦截 ESC 键、或者在 Modal 内部用了 position: absolute 导致定位基准错乱。这些都得靠运行时逻辑补全，Tailwind只管“画布”，不管“开关”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
