同一页面中第二个Bootstrap模态框仅背景变暗无法弹出的问题

这种情况我碰到过好多次，大概率是几个常见的小细节没处理好，咱们一步步来排查和解决：

1. 优先检查模态框ID的唯一性 #

Bootstrap的data-target是通过ID绑定模态框的，同一个页面里ID必须唯一。如果第二个模态框的ID和第一个重复，或者你写错了ID（比如把#modal2写成了#modal1，或者拼写错误），点击按钮时就会触发第一个模态框，但可能因为第一个已经隐藏，就只会出现背景变暗的情况。

检查你的第二个按钮的data-target值，和对应的模态框id是否完全一致，比如：

<!-- 第二个触发按钮 -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#secondModal">
  打开第二个模态框
</button>

<!-- 对应的第二个模态框 -->
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-labelledby="secondModalLabel">
  <!-- 模态框内容 -->
</div>

2. 确认第二个模态框的HTML结构完整 #

Bootstrap模态框需要严格的层级结构，缺少任何一层都可能导致无法正常显示：

<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-labelledby="secondModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document"> <!-- 必须有这个容器 -->
    <div class="modal-content"> <!-- 必须有这个容器 -->
      <div class="modal-header">
        <h5 class="modal-title" id="secondModalLabel">第二个模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        这是第二个模态框的内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

如果你的第二个模态框少了.modal-dialog或者.modal-content，就会出现背景变暗但模态框不显示的情况。

3. 排查CSS或JS冲突 #

• CSS方面：检查是否有自定义CSS覆盖了模态框的样式，比如给模态框设置了display: none !important，或者z-index值太低（低于Bootstrap默认的模态框z-index，默认是1050）。
• JS方面：确保你只引入了一次jQuery和Bootstrap JS（重复引入会导致事件绑定混乱），同时检查有没有自定义JS代码修改了模态框的触发逻辑，比如阻止了按钮的点击事件冒泡。

完整的可运行示例 #

如果还是不确定，你可以对比下面的完整代码，看看自己的代码哪里不一样：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>

<!-- 第一个模态框触发按钮 -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#questionBankModal">
  打开第一个模态框
</button>

<!-- 第一个模态框 -->
<div class="modal fade" id="questionBankModal" tabindex="-1" role="dialog" aria-labelledby="questionBankModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="questionBankModalLabel">题库模态框</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        这是第一个模态框的内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 第二个模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#secondModal">
  打开第二个模态框
</button>

<!-- 第二个模态框 -->
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-labelledby="secondModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="secondModalLabel">第二个模态框</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        这是第二个模态框的内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

按照上面的步骤排查，应该就能解决问题啦！

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