按照官方文档编写的Bootstrap Modal无法在网页显示，如何排查原因？

可能导致Modal无法正常显示的原因如下： #

• 缺少Bootstrap核心CSS依赖：Modal的显示隐藏、交互样式都依赖Bootstrap CSS文件，你当前仅引入了JS资源，未引入对应版本的CSS文件，会导致Modal默认隐藏样式、动画效果完全失效。
• JS依赖冲突&版本不匹配：Bootstrap 4的bootstrap.bundle.min.js已经内置了Popper.js和Bootstrap核心JS，你同时引入了独立的popper.min.js、4.1.3版本的bootstrap.min.js和4.6.0版本的bootstrap.bundle.min.js，多个不同版本的Bootstrap JS共存会直接导致组件初始化冲突。
• 缺少jQuery依赖：Bootstrap 4的所有JS组件都强依赖jQuery，你当前的引入列表中没有加载jQuery资源，Modal的JS逻辑无法正常运行。
• Modal缺少唯一ID，无触发逻辑：默认状态下Modal是隐藏的，你需要给Modal根节点添加唯一id属性，再通过触发元素（比如按钮）添加data-toggle="modal" data-target="#你的ModalID"属性，或者手动调用JS方法$('#你的ModalID').modal('show')触发显示，否则Modal会一直处于隐藏状态。
• 资源加载顺序错误：如果使用独立拆分的JS资源，正确加载顺序应为jQuery → Popper.js → Bootstrap.min.js，顺序错误会导致依赖找不到初始化失败。
• DOM加载顺序问题：如果你的JS资源放在<head>标签内，且没有添加DOM加载完成的监听逻辑，JS执行时Modal对应的DOM节点还未渲染，会导致事件绑定失效，建议将所有JS资源放在</body>结束标签前引入。
• 自定义样式冲突：检查你自己编写的CSS是否存在覆盖.modal类样式的规则，比如强制设置display: none !important、z-index值低于其他页面元素导致Modal被遮挡。

正确配置参考示例： #

依赖引入（仅保留必要资源，避免冲突）

<!-- 第一步：引入Bootstrap 4.6.0 核心CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!-- 第二步：引入jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<!-- 第三步：引入bootstrap.bundle.min.js（已内置popper，无需额外引入其他Bootstrap JS资源） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

Modal与触发按钮代码

<!-- 触发Modal的按钮，data-target对应Modal的id -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  打开模态框
</button>

<!-- 给Modal添加唯一id -->
<div class="modal" tabindex="-1" role="dialog" id="exampleModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">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>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

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