如何解决Bootstrap模态框仅单次显示的JS加载冲突问题

我明白你现在的困扰——想让Bootstrap模态框每次用户访问只弹一次，但之前的方案要么和onload冲突，要么乱加div导致页面出问题。别着急，咱们一步步来解决：

首先，你之前用额外div包裹整个模态框的做法是踩了Bootstrap的坑！Bootstrap的模态框有严格的DOM层级要求（.modal -> .modal-dialog -> .modal-content），额外的包裹层会破坏它的样式和JS初始化逻辑，这就是为啥页面只变暗却看不到弹窗的原因。咱们先把模态框的结构恢复成标准样式：

<!-- 标准Bootstrap模态框结构，别乱加外层div！ -->
<div class="modal fade" id="welcomeModal" tabindex="-1" aria-labelledby="welcomeModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="welcomeModalLabel">欢迎来访！</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        这是仅在本次访问显示一次的弹窗哦～
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

接下来解决弹窗逻辑和onload的冲突问题。window.onload会等所有资源（图片、样式）加载完才触发，这时候可能模态框还没被Bootstrap正确初始化，容易出问题。咱们改用DOMContentLoaded事件，它在DOM结构加载完成就触发，更靠谱。同时用sessionStorage来标记弹窗是否已经显示过——这样每次浏览器会话（关闭再开算新访问）只弹一次，如果想让用户永久不看到，换成localStorage就行。

对应的JS代码如下：

document.addEventListener('DOMContentLoaded', function() {
  // 从sessionStorage里查有没有标记过弹窗已显示
  const popupShown = sessionStorage.getItem('hasShownWelcomePopup');
  
  if (!popupShown) {
    // 初始化并显示模态框
    const modal = new bootstrap.Modal(document.getElementById('welcomeModal'));
    modal.show();
    
    // 标记弹窗已显示，存在sessionStorage里
    sessionStorage.setItem('hasShownWelcomePopup', 'true');
  }
});

额外说明： #

• 如果你用的是Bootstrap 4，初始化模态框的方式要改成$('#welcomeModal').modal('show')，记得引入jQuery和Popper.js哦。
• 一定要确保页面已经正确引入Bootstrap的CSS和JS文件，模态框依赖的Popper.js也不能少。
• 用sessionStorage的话，用户关闭浏览器再打开会重新显示弹窗；如果想让用户只要关闭过一次就永久不显示，把代码里的sessionStorage换成localStorage即可。

这样调整后，模态框就能正常只显示一次，也不会有之前的页面异常问题啦！

内容的提问来源于stack exchange，提问作者user3731358