Bootstrap模式：不是一个函数

我在我的页面中有一个模式。 当我尝试在窗口加载时调用它时，它会向控制台输出一个错误信息： 

$(...).modal is not a function

这是我的Modal HTML： 

 <div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button> <h4 class="modal-title" id="myModalLabel"> This Modal title </h4> </div> <div class="modal-body"> Add some text here </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary"> Submit changes </button> </div> </div> </div> 

 <script type="text/javascript" src="js/bootstrap.js"></script> <script src="jquery-1.11.0.min.js"></script>

这是我的JavaScript来加载窗口时运行它： 

 <script type="text/javascript"> $(window).load(function() { $('#prizePopup').modal('show'); }); </script>

我该如何解决这个问题？

您有脚本顺序的问题。 按以下顺序加载它们： 

 <!-- jQuery --> <script src="jquery-1.11.0.min.js"></script> <!-- BS JavaScript --> <script type="text/javascript" src="js/bootstrap.js"></script> <!-- Have fun using Bootstrap JS --> <script type="text/javascript"> $(window).load(function() { $('#prizePopup').modal('show'); }); </script>

为什么这个？ 因为Bootstrap JS依赖于jQuery ：

插件依赖关系

一些插件和CSS组件依赖于其他插件。 如果您单独包含插件，请确保在文档中检查这些依赖关系。 还要注意，所有的插件依赖于jQuery （这意味着jQuery必须包含在插件文件之前 ）。

如果jQuery在您的代码中多次声明，也可能会显示此警告。 第二个jQuery声明阻止bootstrap.js正常工作。 

 <script src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> ... <script src="jquery-1.11.0.min.js"></script>

jQuery应该是第一个： 

 <script src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script>

改变脚本的顺序

因为bootstrap是一个jquery插件，所以它需要执行jquery

问题是由于jQuery实例不止一次。 请注意，如果您使用多个jQuery实例的文件。 只留下1个jQuery的实例，你的代码将工作。 

 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
Interesting Posts