关于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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
JS事件绑定的常用方式实例总结
Mar 02 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
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
领导视察欢迎词
2014/01/15 职场文书
七年级数学教学反思
2014/01/22 职场文书
迎元旦广播稿
2014/02/22 职场文书
大学生年度个人总结
2015/02/15 职场文书
预备党员考察意见范文
2015/06/01 职场文书
钱学森观后感
2015/06/04 职场文书
家长会感言
2015/08/01 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server