根据模态框显示状态为元素添加/移除类的问题排查

你的代码失效的核心原因是只在页面加载完成时执行了一次状态判断，而模态框的显示/隐藏是后续交互操作触发的，不会重新触发这段判断逻辑。另外，Bootstrap模态框并非直接通过内联display属性控制显示，而是通过内置类和JS API管理，所以直接读取style.display或单次检查show类无法覆盖后续状态变化。

正确解决方案（基于Bootstrap模态框事件） #

由于你的模态框使用了Bootstrap的data-bs-*属性，直接利用Bootstrap提供的模态框事件来监听状态变化是最可靠的方式：

document.addEventListener('DOMContentLoaded', function() {
  // 获取模态框和目标元素
  const modal = document.getElementById('staticBackdrop');
  const overLapDiv = document.getElementById('over-lap');

  // 模态框完全显示后，给目标元素添加类
  modal.addEventListener('shown.bs.modal', function() {
    overLapDiv.classList.add('overlap-div');
  });

  // 模态框完全隐藏后，移除目标元素的类
  modal.addEventListener('hidden.bs.modal', function() {
    overLapDiv.classList.remove('overlap-div');
  });
});

如果你是手动控制模态框的display属性 #

如果没有用Bootstrap的API，而是自己通过JS切换display，需要在切换逻辑里同步更新类，或者监听元素样式变化：

方法1：在切换函数中同步处理类

// 假设这是你切换模态框的函数
function toggleModal() {
  const modal = document.querySelector('.modal-s');
  const overLapDiv = document.getElementById('over-lap');
  const computedDisplay = getComputedStyle(modal).display;

  if (computedDisplay === 'block') {
    modal.style.display = 'none';
    overLapDiv.classList.remove('overlap-div');
  } else {
    modal.style.display = 'block';
    overLapDiv.classList.add('overlap-div');
  }
}

注：getComputedStyle用于获取元素实际生效的样式，避免style.display只能读取内联样式的局限。

方法2：监听样式变化（MutationObserver）

document.addEventListener('DOMContentLoaded', function() {
  const modal = document.querySelector('.modal-s');
  const overLapDiv = document.getElementById('over-lap');

  // 创建观察者监听样式变化
  const observer = new MutationObserver(function(mutations) {
    const computedDisplay = getComputedStyle(modal).display;
    if (computedDisplay === 'block') {
      overLapDiv.classList.add('overlap-div');
    } else {
      overLapDiv.classList.remove('overlap-div');
    }
  });

  // 开始监听模态框的样式属性变化
  observer.observe(modal, { attributes: true, attributeFilter: ['style'] });
});

为什么之前的代码不生效？ #

• 第一种代码：mod.style.display只能读取元素的内联样式，但Bootstrap模态框是通过类（如d-none、show）控制显示，所以mod.style.display大概率为空，判断逻辑失效；且仅在页面加载时执行一次，后续模态框切换不会触发。
• 第二种代码：同样只在页面加载时检查一次show类，后续模态框切换时（比如通过按钮触发），这段代码不会重新执行，因此无法同步更新目标元素的类。

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