Bootstrap模态:不是一个函数 [英] Bootstrap modal: is not a function
本文介绍了Bootstrap模态:不是一个函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的网页中有一个模式。当我尝试在窗口加载时调用它时,它会向控制台输出一个错误消息:
I have a modal in my page. When I try to call it when the windows load, it prints an error to the console that says :
$(...).modal is not a function
这是我的模态HTML:
This is my 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">
×
</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="//code.jquery.com/jquery-1.11.0.min.js"></script>
这是我的JavaScript,可以在加载窗口时运行它:
And this is my JavaScript to run it with when a window is loaded :
<script type="text/javascript">
$(window).load(function() {
$('#prizePopup').modal('show');
});
</script>
我该如何解决这个问题?
How can I fix this problem?
推荐答案
您有脚本顺序问题。按照以下顺序加载它们:
You have an issue in scripts order. Load them in this order:
<!-- jQuery -->
<script src="//code.jquery.com/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 :
Why this? Because Bootstrap JS depends on jQuery:
插件依赖关系
一些插件和CSS组件依赖于其他插件。如果您单独包含插件,请确保在文档中检查这些依赖关系。 还要注意,所有插件都依赖于jQuery (这意味着 jQuery必须包含在插件文件之前)。
这篇关于Bootstrap模态:不是一个函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文