为何无法用JavaScript修改Bootstrap模态框背景遮罩透明度？

先指出你现有代码的几个问题：

• JavaScript里getElementByClassName拼写错误，正确写法是getElementsByClassName，它返回的是HTMLCollection集合，不是单个元素，需要通过索引获取对应元素。
• 直接给style.opacity赋值"0.9 !important"无效，因为元素的内联样式不支持通过这种方式添加!important，得用setProperty方法指定优先级。
• jQuery中直接传递"0.9 !important"给css()方法也不生效，需要用cssText或自定义类来实现权重覆盖。

针对你「只修改特定模态框遮罩透明度」的需求，最可靠的方式是关联目标模态框的生命周期事件——因为Bootstrap的模态框遮罩是动态生成的，只有在模态框显示时才会出现。下面是具体实现方案：

方案1：通过自定义CSS类（推荐，更易维护） #

先定义自定义样式类：

.modal-backdrop.custom-high-opacity {
  opacity: 0.9 !important;
}

然后针对目标模态框，监听它的显示/隐藏事件，动态给遮罩添加/移除类：

JavaScript实现 #

假设目标模态框的ID是#target-modal：

const targetModal = document.getElementById('target-modal');

// 模态框显示时，给遮罩添加自定义类
targetModal.addEventListener('show.bs.modal', function() {
  // 延迟10ms确保遮罩已生成
  setTimeout(() => {
    const backdrop = document.querySelector('.modal-backdrop');
    if (backdrop) backdrop.classList.add('custom-high-opacity');
  }, 10);
});

// 模态框隐藏时，移除遮罩的自定义类
targetModal.addEventListener('hidden.bs.modal', function() {
  const backdrop = document.querySelector('.modal-backdrop.custom-high-opacity');
  if (backdrop) backdrop.classList.remove('custom-high-opacity');
});

jQuery实现 #

$('#target-modal')
  .on('show.bs.modal', function() {
    setTimeout(() => {
      $('.modal-backdrop').addClass('custom-high-opacity');
    }, 10);
  })
  .on('hidden.bs.modal', function() {
    $('.modal-backdrop.custom-high-opacity').removeClass('custom-high-opacity');
  });

方案2：直接操作内联样式（不推荐，耦合性高） #

如果不想新增CSS类，可以用setProperty（JS）或cssText（jQuery）强制设置带!important的样式：

JavaScript修正版 #

const targetModal = document.getElementById('target-modal');

targetModal.addEventListener('show.bs.modal', function() {
  setTimeout(() => {
    // 获取遮罩集合的第一个元素（当前显示的遮罩）
    const backdrop = document.getElementsByClassName('modal-backdrop')[0];
    if (backdrop) {
      // 用setProperty指定!important优先级
      backdrop.style.setProperty('opacity', '0.9', 'important');
    }
  }, 10);
});

// 隐藏时恢复默认透明度（Bootstrap默认是0.5）
targetModal.addEventListener('hidden.bs.modal', function() {
  const backdrop = document.getElementsByClassName('modal-backdrop')[0];
  if (backdrop) {
    backdrop.style.removeProperty('opacity');
  }
});

jQuery修正版 #

$('#target-modal')
  .on('show.bs.modal', function() {
    setTimeout(() => {
      $('.modal-backdrop').css('cssText', 'opacity: 0.9 !important;');
    }, 10);
  })
  .on('hidden.bs.modal', function() {
    $('.modal-backdrop').css('cssText', '');
  });

关键说明 #

• 使用setTimeout是因为Bootstrap的show.bs.modal事件触发时，遮罩元素还未完全插入DOM，延迟一小段时间确保能获取到元素。
• 如果同时打开多个模态框，遮罩会叠加，此时需要额外处理，但一般场景下单个模态框显示时只存在一个遮罩，上面的代码足够覆盖需求。

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