博客动态
Hi!欢迎来到Jerry Coding!喜欢请关注!谢谢!有问题可以留言或者点击下面的QQ交流哦!(最近博主划水中。。更新较慢。。。)
微信扫码

扫一扫关注我

More
关于
New
RSS

bootstrap 模态框modal('show')加载报错解决

Jerry 2019年6月22日 1906  

       bootstrap 模态框加载报错:Uncaught TypeError: $(...).modal is not a function 怎么解决呢? 

       bootstrap 提供了一个模态框 modal,我这里用来做了个图片的弹出放大。关于模态框的介绍,在bootstrap上有介绍:具体 看这里

       根据他的例子,很简单就可以做出个简单的小demo,代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  

  <body>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>  
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script>
	  $(function(){  
		$(".panel-body img").click(function(){  
		    var _this = $(this);//将当前的img元素作为_this传入函数 
			$('#myModal img')[0].src = _this[0].src;
			$('#myModal').modal('show');
		});  
	  });
	</script> 
  
	<div class="panel panel-default">
	  <div class="panel-body">
		<img src="img/1.jpg"><br>
	  </div>
	</div>
	<!-- 模态框(Modal) -->
	<div class="modal fade text-center" id="myModal" role="dialog" tabindex="-1"  aria-hidden="true">
	  <div class="modal-dialog" style="width: auto; display: inline-block">
		<div class="modal-content" >
		  <div class="modal-body" >
			<img src="" style="width: auto; max-width:1200px">
		  </div>
		</div><!-- /.modal-content -->
	  </div><!-- /.modal -->
	</div>
  </body>
</html>

       大体思路就是,点击图片---> 给模态框img赋值源地址--->显示模态框。本地调试也是非常OK,但是加到此网站就开始报错了。。。点击图片没反应,打开F12调试,看到如下报错:

       我了个擦,这是什么情况?代码都一样的怎么还不好使呢?打印出来的这个方法确实是未定义的。。感觉像是bootstrap.js没有加载上呢?博主此时是一脸蒙比,于是各种网上搜解决方法。

      此处省略一万字,一个小时。。。。。

      最后发现了问题出在jquery.js文件 和 bootstrap.js文件的引用顺序,以下列举几种情形:

1、先看一个正确的情形,跟上面的代码一样的引用顺序:

<body>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>  
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
     
    ...........
    ...........
</body>

2、再看一个会报错的:

<body>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>  

     
    ...........
    ...........
</body>

其实上面这种情形很容易发现,boostrap的注释写的很清楚,jquery要放在最前面,所以上面这种引用顺序会报错。

3、最后一个是最坑 最隐蔽的错误:

<body>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> 
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
     
    ...........
    ...........

    <!--在界面某个地方又引用了jquery.js 此时就会有问题!!!!!-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> 
</body>

上面这种情形就会出现 Uncaught TypeError: $(...).modal is not a function 报错,非常的坑。。。

        最终翻了翻代码,发现博主别的地方还引用了jquery.js。其实这个也怪我,没有仔细规范好代码,总是这里一坨 那里一坨,css js都没很好的分离,最后在这浪费了时间。下次找个时间争取重构下吧。


原创文章,转载请注明出处: https://jerrycoding.com/article/bootstrap_modal_err

微信
支付宝

您尚未登录,暂时无法评论。请先 登录 或者 注册

0 人参与 | 0 条评论

每日一句 (From ONE)
别怕美好的一切消失,咱们先来让它存在。