Bootstrap嵌套模态框触发内层弹窗时外层无法单独降低透明度问题

opacity 属性的渲染规则是对元素本身及其所有后代子元素统一生效，后代元素无法通过设置更高的opacity值覆盖父级的透明度效果，因此直接给外层模态框设置opacity时，嵌套在内的子级模态框必然会同步变透明，这是CSS原生特性，并非代码逻辑错误。

方案1：调整DOM层级（推荐，实现最简洁） #

将内层模态框从外层模态框的DOM结构中移出，让两个模态框成为同级节点（统一挂载到<body>标签下是最通用的做法），通过z-index控制叠放顺序，此时给外层模态框设置透明度完全不会影响内层模态框。

• 调整前的错误嵌套结构：

<!-- 内层模态框作为外层的子元素，会继承透明度 -->
<div class="modal" id="outerModal">
  外层模态框表单、按钮等内容
  <div class="modal" id="innerModal">
    内层模态框内容
  </div>
</div>

• 调整后的同级结构：

<!-- 两个模态框同级，互不影响 -->
<div class="modal" id="outerModal">
  外层模态框表单、按钮等内容
</div>
<div class="modal" id="innerModal">
  内层模态框内容
</div>

• 对应的jQuery控制逻辑：

// 内层模态框弹出时，给外层加淡化样式
$('#innerModal').on('show', function () {
  $('#outerModal').css('opacity', 0.5);
})
// 内层模态框关闭时，恢复外层透明度
$('#innerModal').on('hide', function () {
  $('#outerModal').css('opacity', 1);
})

如果使用Bootstrap等UI框架的模态框组件，组件本身默认就会将模态框动态插入到<body>下作为同级节点，直接绑定组件自带的显示/隐藏事件修改外层样式即可。

方案2：拆分外层内容节点（无需调整根DOM位置） #

如果受业务逻辑限制，无法将内层模态框移到外层模态框外部，可以将外层模态框中需要淡化的内容、遮罩层，和内层模态框拆分为同级节点，触发内层弹窗时只给需要淡化的内容节点设置透明度，避开内层模态框即可。
结构示例：

<div class="modal" id="outerModal">
  <!-- 外层模态框遮罩 -->
  <div class="outer-backdrop"></div>
  <!-- 外层需要淡化的内容区 -->
  <div class="outer-content">
    外层表单、按钮等内容
  </div>
  <!-- 内层模态框和上面两个节点同级，不会继承透明度 -->
  <div class="modal" id="innerModal">
    内层模态框内容
  </div>
</div>

对应CSS：

/* 外层淡化状态下，只给遮罩和内容区加透明度 */
.outer-faded .outer-backdrop,
.outer-faded .outer-content {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
/* 保证内层模态框叠在最上层 */
#innerModal {
  position: relative;
  z-index: 1060;
}

方案3：伪元素遮罩模拟（改造成本最低） #

如果完全不想调整原有DOM结构，可以通过给外层模态框添加半透明绝对定位伪元素的方式，模拟外层淡化的视觉效果，只要让内层模态框的z-index高于伪元素，就不会被半透明层遮挡。
对应CSS：

/* 外层淡化状态添加半透明遮罩 */
#outerModal.outer-faded {
  position: relative;
}
#outerModal.outer-faded::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5); /* 深色主题可调整为对应半透明色值 */
  z-index: 1;
}
/* 内层模态框层级高于遮罩，正常显示 */
#innerModal {
  position: relative;
  z-index: 2;
}

• 模态框初始效果：
  
• 直接给外层设置opacity后的异常效果：
  

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