02 bootstrap "modal : is not a function"

来源：互联网发布：淘宝宝贝图片模板.psd 编辑：程序博客网时间：2024/05/16 15:17

前言
最近在使用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

1 0