Bootstrap双模态框异常：首个模态框卡顿，第二个按钮无响应

你遇到的这两个问题其实不属于Bootstrap的原生限制——Bootstrap本身支持在页面中放置多个独立的模态框，出现卡顿和按钮失效大多是实现过程中的细节错误导致的，下面给你梳理几个最常见的原因和解决办法：

• 避免嵌套模态框结构
  Bootstrap官方明确不推荐嵌套模态框（比如把第二个模态框的触发按钮放在第一个模态框内部，或者直接把第二个模态框嵌套在第一个里面）。这种结构会导致z-index层级混乱、事件冒泡冲突，很容易出现第一个模态框打开时卡顿，或者第二个模态框触发按钮完全失效的情况。
  解决办法：把两个模态框都作为<body>的直接子元素放置，不要嵌套在任何其他容器（尤其是第一个模态框的内部）。

• 确保模态框ID唯一且触发目标正确
  每个模态框的id必须是唯一的，触发按钮的data-bs-toggle="modal"和data-bs-target="#xxx"（Bootstrap 5）或者data-toggle="modal"和data-target="#xxx"（Bootstrap 3）必须精准对应目标模态框的ID。如果ID重复或者目标指向错误，就会出现按钮无法触发模态框，或者触发时因为DOM查找混乱导致的卡顿。
  举个正确的示例：

  <!-- 第一个模态框及触发按钮 -->
  <button type="button" data-bs-toggle="modal" data-bs-target="#modal1">打开模态框1</button>
  <div class="modal fade" id="modal1" tabindex="-1" aria-labelledby="modal1Label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal1Label">模态框1</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          这是第一个模态框的内容
        </div>
      </div>
    </div>
  </div>
  
  <!-- 第二个模态框及触发按钮 -->
  <button type="button" data-bs-toggle="modal" data-bs-target="#modal2">打开模态框2</button>
  <div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="modal2Label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal2Label">模态框2</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          这是第二个模态框的内容
        </div>
      </div>
    </div>
  </div>
  

• 检查JS初始化与文件引入问题
  如果你手动用JS初始化模态框，不要重复调用new bootstrap.Modal()，重复初始化会导致事件绑定混乱，引发卡顿。另外，确保页面只引入了一次Bootstrap的JS文件，重复引入也会导致类似的冲突问题。如果你的项目中同时使用了jQuery和Bootstrap，还要注意不要让jQuery的事件绑定覆盖Bootstrap的模态框触发事件。

• 确认模态框DOM结构完整
  每个模态框必须遵循Bootstrap的标准结构：.modal容器下必须包含.modal-dialog，再嵌套.modal-content，内部的.modal-header、.modal-body等部分也不能缺失。结构不完整会导致渲染异常，进而出现卡顿或者交互失效的情况。

如果是Bootstrap版本混用（比如同时引入Bootstrap 3和Bootstrap 5），也会出现这类问题，因为两个版本的API、类名和事件机制有差异，一定要确保项目中只使用一个版本的Bootstrap。

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