页面加载显示modal报错：Uncaught TypeError: $(...).modal is not a function

我来帮你梳理下这个问题，你遇到的Uncaught TypeError: $(...).modal is not a function错误，哪怕换成jQuery调用也不行，大概率是Bootstrap JS没有正确绑定到jQuery，或者DOM/资源加载的顺序、结构有问题。结合你的代码，我整理了几个可行的排查和解决步骤：

1. 移除Modal里的hide类 #

你用的是Bootstrap 3.3.7，这个版本里modal组件默认就是隐藏状态的，不需要额外加hide类——这个类反而会干扰Bootstrap的JS识别，导致无法正确初始化modal。把你的modal标签改成：

<div class="modal fade" id="loadModal">

2. 检查是否重复加载jQuery #

如果页面其他地方（比如底部、其他组件的脚本里）又引入了另一个版本的jQuery，会覆盖掉之前绑定了Bootstrap的jQuery实例，这是最常见的坑！比如你可能在页面末尾又加了<script src="jquery-3.x.x.min.js"></script>，这种情况下Bootstrap绑定的是第一个jQuery，后面的新版本会把它替换掉，自然找不到modal方法。

你可以打开浏览器控制台，输入jQuery.fn.modal，如果返回undefined，就说明Bootstrap没有成功绑定到当前的jQuery实例。

3. 调整脚本的执行时机（可选，但值得一试） #

虽然$(window).on('load')是等所有资源加载完再执行，但有时候用$(document).ready()会更稳妥——它会在DOM结构加载完成后就执行，不需要等图片等资源。把你的脚本改成：

$(document).ready(function(){
  $('#loadModal').modal('show');
});

4. 修复Modal的关闭按钮语义（可选，但更规范） #

Bootstrap 3推荐用<button>标签作为modal的关闭按钮，而不是<a>，这样语义更正确，也能避免一些潜在的事件冲突：

<button type="button" class="close" data-dismiss="modal">&times;</button>

调整后的完整代码参考 #

脚本部分：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#loadModal').modal('show');
});
</script>

Modal部分：

<div class="modal fade" id="loadModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

先按上面的步骤调整，尤其是第一步和第二步，应该能解决你的问题。

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