关于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序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
Ext 今日学习总结
2010/09/19 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
python twilio模块实现发送手机短信功能
2019/08/02 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
高效课堂标语
2014/06/26 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
MySQL约束超详解
2021/09/04 MySQL