不必用 modal；应使用 position:fixed 的 div + 100dvh + overflow-hidden 控制，避免 Bootstrap Modal 的默认交互逻辑干扰。
移动端全屏弹窗广告必须用 modal 吗？
不是。Bootstrap 的 modal 默认带遮罩、滚动锁定和键盘关闭逻辑，但全屏广告通常不需要 Esc 关闭、不希望用户滚动背景、也不该响应 data-bs-dismiss="modal"。硬套 modal 反而要写一堆 CSS 覆盖和 JS 阻断，得不偿失。
更直接的做法是：用一个 div + position: fixed + 手动控制显隐，再借 Bootstrap 的工具类快速适配移动端。
- 用
class="d-flex justify-content-center align-items-center"居中内容，比modal-dialog更轻量 - 加
class="w-100 h-100"确保铺满视口，避免依赖modal-dialog-centered的复杂计算 - 禁用背景滚动只需在
body上临时加class="overflow-hidden"，别碰modal-backdrop
如何让弹窗在 iOS Safari 和 Android Chrome 都真正全屏？
关键在视口单位和强制重绘。iOS Safari 对 height: 100vh 的处理有 bug（地址栏收起/展开时 vh 值会变），导致弹窗高度忽大忽小；Android 部分机型也存在类似问题。
解决方案是放弃 100vh，改用 100dvh（动态视口高度），并 fallback 到 JS 获取 window.innerHeight：
.ad-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh; /* 主力 */
height: -webkit-fill-available; /* iOS Safari fallback */
}
- 必须加
-webkit-fill-available，否则 iOS 上可能留白或溢出 - 不要用
min-height: 100vh，它无法解决动态变化问题 - 如果广告含视频或 iframe，需额外加
playsinline和webkit-playsinline属性，否则 iOS 会跳全屏播放器
点击关闭按钮后怎么恢复页面滚动？
很多人只记得加 overflow-hidden，却忘了移除——结果用户关掉广告后整个页面不能滚动，尤其在微信内置浏览器里特别明显。
正确做法是：关闭时同步操作两个地方：
- 移除
body上的overflow-hidden - 手动重置
body.style.top（如果你之前为防抖动设过负 margin） - 调用
window.scrollTo(0, parseInt(document.body.style.top || '0') * -1)补回因锁滚动产生的偏移
示例关闭逻辑：
document.querySelector('.ad-close').addEventListener('click', () => {
document.body.classList.remove('overflow-hidden');
const savedTop = document.body.style.top;
document.body.style.top = '';
if (savedTop) window.scrollTo(0, parseInt(savedTop) * -1);
document.querySelector('.ad-overlay').classList.add('d-none');
});
为什么加了 data-bs-toggle="modal" 后广告一闪就消失？
因为 Bootstrap 5 的 modal 初始化时会自动绑定 hide.bs.modal 事件，并在显示后立即检查是否满足“可关闭”条件。如果你没给弹窗加 id、或者没配 data-bs-target，它会误判为非法调用，触发默认关闭流程。
根本解法是彻底绕开 Bootstrap 的 Modal JS 插件：
- 删掉所有
data-bs-toggle、data-bs-target、data-bs-dismiss - 确保 HTML 中没有
class="modal"或class="modal-dialog"—— 这些类会触发 CSS 里的隐藏样式 - 如果用了 Bootstrap 的 JS 包但不想加载 Modal 模块，构建时可通过
bootstrap/js/dist/modal.js单独排除
广告这种强业务逻辑组件，不该被 UI 框架的交互契约绑架。
真正麻烦的不是铺满屏幕，而是处理 iOS 视口变化、微信浏览器的 scroll 锁残留、以及用户连续快速点击关闭按钮时的竞态。这些细节不写死在 JS 里，光靠 class 就稳不住。
