如何解决Bootstrap Modal无法正常运行的依赖问题？

我太懂你这种挫败感了——照着示例写的Modal在本地完全没动静，换在线平台却跑得好好的，十有八九是依赖引用的顺序或正确性出了问题。咱们一步步捋清楚Bootstrap Modal到底需要哪些依赖，以及怎么验证它们是否生效。

首先得明确：你用的jQuery 1.11.3对应Bootstrap 3.x版本（Bootstrap 4+对jQuery版本要求更高），这个版本的Modal必须依赖三个核心资源，而且加载顺序绝对不能乱：

• 先加载Bootstrap的CSS（负责Modal的样式渲染）
• 再加载jQuery（Bootstrap的JS完全基于jQuery，必须先让jQuery生效）
• 最后加载Bootstrap的JS（负责Modal的交互逻辑，比如弹出、关闭）

给你一个能直接运行的完整示例代码 #

<html>
<head>
  <!-- 1. 先引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
  <!-- 2. 再引入jQuery -->
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <!-- 3. 最后引入Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 触发Modal的按钮 -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#testModal">
    点击打开Modal
  </button>

  <!-- Modal核心结构 -->
  <div class="modal fade" id="testModal" tabindex="-1" role="dialog" aria-labelledby="modalTitle">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="modalTitle">测试Modal</h4>
        </div>
        <div class="modal-body">
          终于能正常显示啦！
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

教你怎么排查依赖问题 #

打开浏览器的开发者工具（按F12或Ctrl+Shift+I），用这两个标签页验证：

1. Console标签页：
   • 如果看到$ is not defined：说明jQuery没加载成功，检查引用的URL是否正确，或者是不是把Bootstrap JS放在jQuery前面了。
   • 如果看到Bootstrap requires jQuery：就是加载顺序搞反了，必须先加载jQuery再加载Bootstrap JS。
   • 没报错但Modal没反应：检查Modal的HTML结构，比如data-target的值是不是和Modal的id完全匹配，有没有漏写modal fade这类核心class。
2. Network标签页：
   刷新页面后，查看所有CSS和JS文件的加载状态：状态码是200就是加载成功，要是404说明路径写错了（本地文件的话要检查相对路径是否正确，比如js/jquery.min.js是不是和你的文件结构对应）。

最后提醒两个常见坑 #

• 别同时引用多个版本的jQuery，比如既引1.11.3又引3.x，会直接导致冲突。
• 本地引用文件时，不要用绝对路径（比如C:\xxx\jquery.min.js），用相对路径更稳妥。

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