关于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框架：

居然说我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弹出框问题的朋友可以参考下本教程。

赞 (0)

相关推荐

  • Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法

    Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法

    Bootstrap 弹出框modal上层的输入框不能获得焦点问题,具体内容如下 1.在使用Bootstrap框架中目前modal弹出框只支持一层 即在当前弹出框上不能再使用modal弹出框. 如果使用自定义的弹出框,例如:http://my.oschina.net/tianma3798/blog/737232 如果自定义弹出框中有input输入框,如果input 输入框不能获得焦点,则可能原因如下: 许多使用定义弹出层 <div class="modal fade" tabind

  • bootstrap modal+gridview实现弹出框效果

    bootstrap modal+gridview实现弹出框效果

    项目需要在gridview的表单信息中点击更新,弹出表单进行操作,不需要跳转. 1.在girdview中加入更新操作按钮用来调用modal弹窗 'buttons' => [ 'update' => function ($url, $model, $key) { return Html::a('<span class="glyphicon glyphicon-pencil"></span>', '#', [ 'data-toggle' => 'm

  • JS组件Bootstrap实现弹出框和提示框效果代码

    JS组件Bootstrap实现弹出框和提示框效果代码

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

  • Bootstrap实现带动画过渡的弹出框

    Bootstrap实现带动画过渡的弹出框

    先看看效果图: 代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>带动画过的渡弹出框</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css&quo

  • Bootstrap每天必学之弹出框（Popover）插件

    Bootstrap每天必学之弹出框（Popover）插件

    Bootstrap弹出框插件,提供了一个扩展的视图,弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面. 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 如果您想要单独引用该插件的功能,那么您需要引用 popov

  • Bootstrap弹出框(modal)垂直居中的问题及解决方案详解

    使用过bootstrap modal(模态框)组件的人都有一种困惑, 好好的一个弹出框怎么就无法垂直居中了呢?刚巧在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话少说,切入正题,Bootstrap弹出框垂直居中的问题,因为我拿到的弹出框样式并非垂直居中,而是top 10%,但页面长了,就显得特别恶心. 解决方案如下所示: 1.在css里,找到 .mo

  • bootstrap modal弹出框的垂直居中

    bootstrap modal弹出框的垂直居中

    本人前端菜鸟,公司项目尝试采用bootstrap,我身先士卒为同事趟"坑",无奈UI妹子刁难非得让modal弹出框垂直居中,为了前端开发岗位的荣誉,花时间满足之. 最先就是百度咯,方法,就是修改源码 that.$element.children().eq(0).css("position", "absolute").css({ "margin":"0px", "top": functio

  • 简介BootStrap model弹出框的使用

    简介BootStrap model弹出框的使用

    之前,我们讲解了bootstrap tab的使用,今天我们来了解下bootstrap 中model弹出窗的使用. 效果: 代码: <input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx&quo

  • BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法

    弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 1 设置延时, 超过该延时未移入弹窗则弹窗隐藏 Tooltip.prototype.init = function{中的 var triggers = this.options.trigger.split(' ')后面加上 /

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

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

    问题描述 写项目中使用到了前端框架bootstrap,提供的功能很强大! bootstrap学习 然而在用bootstrap提供的弹出框组件时,弹出框怎么也弹不出! 按理说应该这样: 官方给出的样例是这样写的: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 弹出框(Popover)插件</title> <link href="http://libs.baidu.com/bo

  • Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码

    Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码

    1.Bootstrap弹出框示例 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框&

  • Bootstrap弹出框（Popover）被挤压的问题小结

    Bootstrap弹出框（Popover）被挤压的问题小结

    比较了下Bootstrap的popover和一些其它的开源项目,觉得Bootstrap的还算不错.没想到第一次就遇到了一个问题. 弹出框显示的时候如果贴近一个列的边沿,就会很窄,如果一个列比较宽还好,而如果遇到这样的列比如:<div class="col-md-2">,几乎任意位置显示的弹出框都被挤压了. 先看看我的实现以及效果: js: $(function (){ $("[data-toggle='popover']").popover({ trig

  • bootstrap 弹出框modal添加垂直方向滚轴效果

    效果图预览 1. 添加css样式 .modal-dialog{position: absolute; top: 0; bottom: 0; left: 0; right: 0;} .modal-content{/*overflow-y: scroll; */ position: absolute; top: 0; bottom: 0; width: 100%;} .modal-body{overflow-y: scroll; position: absolute; top: 55px; bott

  • Android WebView无法弹出软键盘的原因及解决办法

    requestFoucs();无效. requestFoucsFromTouch();无效. webview.setTouchListener:无效. 问题所在: 继承WebView时,注意构造方法: public CommonWebView(Context context) { super(context); init(); } public CommonWebView(Context context, AttributeSet attrs) { super(context, attrs);

  • iOS 10拨打系统电话弹出框延迟出现问题的解决

    前言 最近在开发中遇到了一些问题,发现iOS 10拨打系统电话发现弹出框会延迟2s左右出现,很不爽,研究了一下,发现是openURL在iOS 10及其之后会阻塞主线程 所以,拨打电话前,做个判断,下面话不多说了,来一起看看详细的介绍吧. 示例代码: // 拨打电话 + (void)callPhone:(NSString *)phoneNum { if ([ISNULL(phoneNum) length] == 0) { [SVProgressHUD showErrorWithStatus:@"拨

  • JQuery插件fancybox无法在弹出层使用左右键的解决办法

    JQuery插件fancybox解决无法在弹出层使用左右键的问题.无法使用的原因在于,插件接管了左右键,用于多张图片的翻页. 如果不需要这个功能,可以在fancybox插件中,禁止接管就好了. 具体在插件下的js文件 jquery.fancybox-1.3.4.js 中的598行,注释掉就好了. // _set_navigation();

随机推荐