02 bootstrap "modal : is not a function"

前言
最近在使用bootStrap模态框的时候, 出现了一个这样的问题
1 使用按钮[data-target]点击是可以显示出模态框的
2 但是使用$(“#myModal”).modal()， console后台爆出了一个 ‘$(…).modal is not a function’

我引用的css, js代码如下

    <link rel="stylesheet" type="text/css" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  
    <script type="text/javascript"  src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>   
    <script type="text/javascript" src="/ProjName/js/lib/jquery-2.1.1.min.js"></script>  

测试01
对于上面的导入, 我试过只保留jquery 2.1.1, 但是结果却是点击按钮都不能显示出模态框
所以 我将两个版本的jquery都保存下来了

    <link rel="stylesheet" type="text/css" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
    <script type="text/javascript"  src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>   
    <script type="text/javascript" src="/ProjName/js/lib/jquery-2.1.1.min.js"></script>  

测试02
但是 这里就出现了上面的问题’$(“#myModal”).modal() console后台爆出了一个 $(…).modal is not a function’
最后 我开始怀疑是不是jquery2.1.1有问题了, 之后将jquery2.1.1的引用删去之后, 就能够正常显示模态框了

    <link rel="stylesheet" type="text/css" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  
    <script type="text/javascript"  src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>   

测试03
之前, 我一直以为是jquery2.1.1的问题
1) 但是 我将” < script type=”text/javascript” src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js”>< /script> ” 替换为 “< script type=”text/javascript” src=”/ProjName/js/lib/jquery-2.1.1.min.js”>< /script> ”
2) 并删掉了下面的一行 “< script type=”text/javascript” src=”/ProjName/js/lib/jquery-2.1.1.min.js”>< /script> ”
上面的效果也就是只保留了jquery2.1.1, 不过是将其提前到了bootStrap.min.js之前, 就能够正常显示了

    <link rel="stylesheet" type="text/css" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/ProjName/js/lib/jquery-2.1.1.min.js"></script>  
    <script type="text/javascript"  src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>   

问题解决
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>

Why this? Because Bootstrap JS depends on jQuery:
参考 : http://stackoverflow.com/questions/25757968/bootstrap-modal-is-not-a-function

模态框参考 :

    <!--
        来自 : http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

        <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
     -->     

参考 :
http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
http://stackoverflow.com/questions/25757968/bootstrap-modal-is-not-a-function
http://stackoverflow.com/questions/24978937/modal-error-uncaught-typeerror-undefined-is-not-a-function-modal