点击按钮后Bootstrap 5 Modal无法显示，求排查原因

• CDN 资源加载顺序错误
  Bootstrap 5 依赖 Popper.js 实现弹窗类组件的定位逻辑，必须先加载 Popper.js，再引入 Bootstrap 的 JS 文件。顺序颠倒会直接导致 Modal 失效。检查你的引入顺序是否符合规范：

  <!-- 正确加载顺序 -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
  

• Modal 结构或属性不规范
  确保 HTML 结构完全符合 Bootstrap 5 的要求：

  • 触发按钮必须携带 data-bs-toggle="modal" 和 data-bs-target="#你的ModalID" 属性，ID 需与 Modal 容器的 ID 完全匹配
  • Modal 容器必须包含 modal 类，且嵌套完整的 modal-dialog、modal-content 结构，示例如下：

    <div class="modal fade" id="testModal" tabindex="-1" aria-labelledby="testModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="testModalLabel">测试弹窗</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 冲突或资源加载失败

  • Bootstrap 5 不再依赖 jQuery，若页面额外引入 jQuery 可能引发冲突，建议移除不必要的 jQuery 引用
  • 打开浏览器控制台（F12）查看是否有报错，比如 bootstrap 对象未定义、Popper 加载失败等信息，这些直接指向资源加载问题

• CSS 资源未正确引入
  确认 Bootstrap 的 CSS 文件已正常加载，否则 Modal 的隐藏/显示样式无法生效：

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  

• 自定义样式覆盖默认规则
  检查是否有自定义 CSS 修改了 .modal、.fade 类的 display、opacity 等属性，比如强制设置 .modal { display: none !important; } 会直接阻断 Bootstrap 的动态显示逻辑

• 触发事件被阻止
  排查是否有自定义 JS 代码调用了 event.preventDefault() 阻止了按钮的默认点击行为，导致 Bootstrap 的 Modal 触发逻辑无法执行

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