Bootstrap全屏模态框实现 掌握Bootstrap如何让Modal全屏显示

Bootstrap 5 全屏模态框需将 modal-fullscreen 类加在 modal-dialog 上，并清除其 max-width 和 margin；配合 100dvh 高度、modal-body 滚动控制及正确 JS 初始化时机，才能实现真正全屏效果。

Bootstrap 5 的 modal-fullscreen 类直接生效但有断点限制

bootstrap 5 内置了全屏模态框支持，不是靠自己写 css 覆盖，而是用 modal-fullscreen 这个类。但它默认只在特定视口宽度下触发——比如 modal-fullscreen-md-down 表示「中屏及以下才全屏」，modal-fullscreen（无后缀）则从最小屏开始就全屏。

• 常见错误：只加 modal-fullscreen 却没删掉 modal-dialog 默认的 max-width 和 margin，导致视觉上还是居中窄框
• 必须确保模态框结构是：div.modal > div.modal-dialog > div.modal-content，且 modal-fullscreen 加在 modal-dialog 上，不是 modal
• 如果想「所有尺寸都强制全屏」，用 modal-fullscreen；若只想手机/平板全屏、桌面恢复常规尺寸，选带断点的变体，如 modal-fullscreen-sm-down

自定义全屏需覆盖 modal-dialog 的 max-width 和 margin

内置类不够用时（比如要兼容 Bootstrap 4，或需要精确控制滚动行为），就得手动干预样式。核心是干掉 modal-dialog 的约束性声明，否则即使设了 width: 100% 也会被 max-width 截断。

• 关键 CSS 规则：.modal-dialog { width: 100%; max-width: none; margin: 0; }
• 别忘了加 height: 100vh 到 .modal-content 或 .modal-body，否则内容区不会撑满视口高度
• 移动端容易出问题：iOS Safari 对 vh 单位有滚动缩放 bug，用 100dvh 更稳（但注意兼容性，dvh 是 2023 年后才普及）

全屏 Modal 中内容溢出和滚动行为不一致

全屏后，用户常遇到内容被截、无法滚动、或者整个页面跟着动。这不是模态框没写对，而是 body 的 overflow 没处理好，或者子容器没设 overflow-y: auto。

• Bootstrap 5 自动给 body 加 overflow: hidden，但仅限于模态框打开时；关闭后会恢复——这点基本可靠
• 真正的问题在内部：如果 .modal-body 没设固定高度 + overflow-y: auto，长内容就会把整个模态框撑开，甚至溢出视口底部
• 推荐写法：.modal-body { max-height: calc(100vh - 120px); overflow-y: auto; }（减去 header/footer 高度）
• 避免在 .modal-content 上设 overflow，它会影响阴影和圆角渲染

JavaScript 打开全屏 Modal 前要确认 DOM 已挂载且 class 正确

用 JS 动态初始化时，如果 modal-dialog 上漏了 modal-fullscreen 类，或者在 show 之前没补上，就会按默认尺寸弹出——而且这个行为不可逆，除非隐藏再重开。

• 不要依赖 JS 添加 class 后立刻 new bootstrap.Modal(...).show()，DOM 渲染可能有微小延迟，稳妥做法是加个 setTimeout(..., 0) 或用 queueMicrotask
• 更干净的做法：把 modal-fullscreen 写死在 HTML 里，JS 只负责触发；或者用 shown.bs.modal 事件补样式（但此时已渲染完毕，只能修修补补）
• Vue/React 等框架中，务必等组件 mounted 或 useEffect 完成、真实 DOM 存在后再初始化 Modal 实例

全屏 Modal 看似只是加个 class，但实际卡点都在细节：类加在哪一层、vh 在不同系统的表现、滚动容器的高度计算、以及 JS 初始化时机——这些地方错一个，就退回「看起来像全屏，实则处处别扭」的状态。