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 要求以下三者按顺序加载：
- jQuery（≥3.2.1，Bootstrap 4 官方兼容版本）
- Popper.js（v1.x，用于 tooltip/dropdown/modal 的定位；Bootstrap 4.6 的 CDN 包已内置，无需单独引入）
- Bootstrap JS（bootstrap.min.js，含 modal 插件逻辑）
⚠️ 注意：Bootstrap 5 已移除 jQuery 依赖，但本例使用的是 Bootstrap 4.6，因此 jQuery 为强制前提。
✅ 完整可运行代码（已修复）
<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body>
<!-- 触发按钮 -->
<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 </body>.
</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>
</body>
</html>? 常见排查要点
- 检查浏览器开发者工具（F12）→ Console 标签页：若出现 ReferenceError: $ is not defined 或 TypeError: $(...).modal is not a function，即明确提示 jQuery 或 Bootstrap JS 未加载；
- 确认 <script> 标签位置：必须置于 </body> 之前，不可放在 <head> 中（除非添加 defer 属性，但不推荐）；
- 避免混用版本：CSS 与 JS 的 Bootstrap 版本号需严格一致（如 @4.6.2）；
- 禁用浏览器扩展干扰：部分广告拦截插件可能屏蔽 CDN 资源，可尝试无痕模式验证；
- 自定义属性校验：确保 data-target 值（如 #exampleModal）与 Modal 的 id 完全匹配，区分大小写和空格。
? 总结
Bootstrap 4 的 Modal 并非纯 CSS 实现，其显示/隐藏、背景遮罩、键盘事件（Esc 关闭）、焦点管理等全部由 JavaScript 控制。牢记「CSS 负责样式，JS 负责行为」这一原则，即可快速定位并解决 Modal 不显示问题。升级至 Bootstrap 5 后可摆脱 jQuery，但需重写初始化逻辑（如改用 new bootstrap.Modal(...)），本文方案专为 Bootstrap 4.6 场景优化。
