关于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 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
详解JavaScript中的链式调用
Nov 27 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
JS实现php的伪分页
2008/05/25 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
JavaScript延迟加载
2021/03/09 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
如何快速上手Vuex
2017/02/14 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
介绍一下OSI七层模型
2012/07/03 面试题
小学教师的自我评价范例
2013/10/31 职场文书
四风存在的原因分析
2014/02/11 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
助学感谢信范文
2015/01/21 职场文书
预备党员介绍人意见
2015/06/01 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
英语教学课后反思
2016/02/15 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库