如何为Bootstrap两个模态框设置不同背景透明度？

这个需求其实不难实现，Bootstrap的模态框背景是通过动态生成的.modal-backdrop元素来实现的，每个打开的模态框都会对应一个独立的.modal-backdrop。我们可以通过两种方式来区分外层和内层的背景并设置不同透明度：

方法一：直接使用CSS选择器（适合固定两个模态框的场景） #

如果你的页面只会存在这两个模态框，我们可以利用CSS的:nth-of-type选择器来定位第一个（外层）和第二个（内层）背景元素：

/* 外层模态框的背景（第一个生成的backdrop） */
.modal-backdrop:nth-of-type(1) {
  opacity: 0.3 !important;
  /* 加上!important是为了覆盖Bootstrap默认的opacity样式 */
}

/* 内层模态框的背景（第二个生成的backdrop） */
.modal-backdrop:nth-of-type(2) {
  opacity: 0.9 !important;
}

注意点： #

• 这个方法依赖模态框的打开顺序：外层先打开，内层后打开，这样第一个.modal-backdrop对应外层，第二个对应内层。
• 如果后续需要添加更多模态框，这个选择器会影响第三个及以后的背景，所以只适合固定两个模态框的场景。

方法二：结合JS给背景添加自定义类（更灵活的通用方案） #

如果你的页面可能有更多模态框，或者需要更精准的控制，我们可以通过Bootstrap的模态框事件，给对应背景添加自定义类，再通过类来设置透明度：

第一步：补全HTML结构（包含内层模态框） #

首先把你的HTML代码补全，给两个模态框分别加上自定义类（比如modal-outer和modal-inner）：

<!-- 外层模态框触发按钮 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 外层模态框 -->
<div id="myModal" class="modal fade modal-outer">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">外层模态框</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>点击下方按钮打开内层模态框</p>
        <!-- 内层模态框触发按钮 -->
        <button class="btn btn-secondary mt-2" data-toggle="modal" data-target="#innerModal">
          打开内层模态框
        </button>
      </div>
    </div>
  </div>
</div>

<!-- 内层模态框 -->
<div id="innerModal" class="modal fade modal-inner">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">内层模态框</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>这是内层模态框内容</p>
      </div>
    </div>
  </div>
</div>

第二步：添加JS事件监听 #

利用Bootstrap的shown.bs.modal（模态框显示后）和hidden.bs.modal（模态框隐藏后）事件，给对应的.modal-backdrop添加/移除自定义类：

// 外层模态框显示后，给最新生成的背景加类
$('#myModal').on('shown.bs.modal', function() {
  $('.modal-backdrop').last().addClass('backdrop-outer');
});

// 内层模态框显示后，给最新生成的背景加类
$('#innerModal').on('shown.bs.modal', function() {
  $('.modal-backdrop').last().addClass('backdrop-inner');
});

// 模态框隐藏后，移除对应背景的自定义类
$('.modal').on('hidden.bs.modal', function() {
  $('.modal-backdrop').last().removeClass('backdrop-outer backdrop-inner');
});

第三步：编写CSS样式 #

通过自定义类来设置不同的透明度：

/* 外层模态框背景透明度 */
.backdrop-outer {
  opacity: 0.3 !important;
}

/* 内层模态框背景透明度 */
.backdrop-inner {
  opacity: 0.9 !important;
}

这个方法的优势是不管模态框的打开顺序如何，都能精准对应到各自的背景，扩展性更强。

内容的提问来源于stack exchange，提问作者Saurabh Kumar Singh