bootstrap modal 无法显示通常是因为缺少必需的 javascript 依赖（jquery 和 bootstrap js），本文详解如何正确引入资源、验证依赖顺序，并提供可直接运行的完整示例。

bootstrap modal 无法显示通常是因为缺少必需的 javascript 依赖（jquery 和 bootstrap js），本文详解如何正确引入资源、验证依赖顺序，并提供可直接运行的完整示例。

Bootstrap 4.x 的 Modal 是一个JavaScript 驱动的交互组件，仅引入 CSS 文件是不够的——它依赖 jQuery 和 Bootstrap 自带的 JavaScript 插件才能响应 data-toggle="modal" 等声明式触发指令。若缺失 JS 资源或加载顺序错误，点击按钮将完全无反应，控制台也通常不报错（静默失败），极易被忽略。

✅ 正确引入顺序（必须严格遵守）

Bootstrap 4.6 要求以下三者按顺序加载：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

1. jQuery（≥3.2.1，Bootstrap 4 官方兼容版本）
2. Popper.js（v1.x，用于 tooltip/dropdown/modal 的定位；Bootstrap 4.6 的 CDN 包已内置，无需单独引入）
3. Bootstrap JS（bootstrap.min.js，含 modal 插件逻辑）

⚠️ 注意：Bootstrap 5 已移除 jQuery 依赖，但本例使用的是 Bootstrap 4.6，因此 jQuery 为强制前提。

✅ 完整可运行代码（已修复）

  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Bootstrap Modal 示例</title><!-- Bootstrap CSS --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><!-- 触发按钮 --><button type="button" class="btn btn-primary mt-4 ml-4" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

  <!-- Modal 结构（保持原样即可） -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          This modal is now working! ✅<br>
          Ensure jQuery and Bootstrap JS are loaded before closing .
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <!-- ✅ 关键：JS 必须放在 </body> 内、HTML 结构之后 -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>