关于Bootstrap弹出框无法调用问题的解决办法


Posted in Javascript onMarch 10, 2016

问题描述

写项目中使用到了前端框架bootstrap,提供的功能很强大!

bootstrap学习

然而在用bootstrap提供的弹出框组件时,弹出框怎么也弹不出!

按理说应该这样:

关于Bootstrap弹出框无法调用问题的解决办法 

官方给出的样例是这样写的:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 弹出框(Popover)插件</title>
<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>
</head>
<body>
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title" 
data-container="body" data-toggle="popover" data-placement="left" 
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title" 
data-container="body" data-toggle="popover" data-placement="top" 
data-content="顶部的 Popover 中的一些内容">
顶部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title" 
data-container="body" data-toggle="popover" data-placement="bottom" 
data-content="底部的 Popover 中的一些内容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title" 
data-container="body" data-toggle="popover" data-placement="right" 
data-content="右侧的 Popover 中的一些内容">
右侧的 Popover
</button>
</div>
<script>$(function () 
{ $("[data-toggle='popover']").popover();
});
</script>
</div>
</body>
</html>

代码检查了三遍,确定代码无误后,进入火狐debug,

<script>
$(function () 
{ 
$("[data-toggle='popover']").popover(); 
});
</script>

这一段代码是全局的,一进入页面就会激活,直接跳进入了bootstrap的js框架:

关于Bootstrap弹出框无法调用问题的解决办法 

居然说我jquery没有引入!但我明明引入了!

<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/jquery.min.js" ></script>

智障吗?。。。。。。

后来一想,bootstrap依赖jquery,于是我抱着试一试的心态调整了引用顺序:

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

通过以上内容介绍Bootstrap弹出框无法调用问题就顺利解决了,遇到bootstrap弹出框问题的朋友可以参考下本教程。

Javascript 相关文章推荐
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
详解angular element()方法使用
Apr 08 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
TypeScript Type Innference(类型判断)
Mar 10 #Javascript
JavaScript File分段上传
Mar 10 #Javascript
ES6中非常实用的新特性介绍
Mar 10 #Javascript
ES6的新特性概览
Mar 10 #Javascript
JavaScript字符串常用的方法
Mar 10 #Javascript
javascript中call apply 与 bind方法详解
Mar 10 #Javascript
angularjs表格ng-table使用备忘录
Mar 09 #Javascript
You might like
一次编写,随处运行
2006/10/09 PHP
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
中国梦演讲稿范文
2014/08/28 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
舞出我人生观后感
2015/06/16 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书