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

比较了下Bootstrap的popover和一些其它的开源项目，觉得Bootstrap的还算不错。没想到第一次就遇到了一个问题。

弹出框显示的时候如果贴近一个列的边沿，就会很窄，如果一个列比较宽还好，而如果遇到这样的列比如：<div class="col-md-2">，几乎任意位置显示的弹出框都被挤压了。

先看看我的实现以及效果：

js：

$(function (){
 $("[data-toggle='popover']").popover({
  trigger: 'hover'
 });
});

html：

<div class="col-md-1">
 ...
 <img src="..." width="50" height="50" data-toggle="popover" data-content='...' title="..." />
 ...
</div>

效果

不过解决起来很简单，只需在初始化的时候添加一个container属性就可以了：

$(function (){
 $("[data-toggle='popover']").popover({
  trigger: 'hover',
 container: 'body'
 });
});

我们把容器设置成整个页面的body，这样popover就有足够宽的地方了。

实际上在官网上对container的作用是有说明的地址  ，只是没有注意到：

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.

以上所述是小编给大家介绍的Bootstrap弹出框（Popover）被挤压的问题小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

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

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

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

  • 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的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法

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

  • 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 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）被挤压的问题小结

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

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

  • 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弹出框无法调用问题的解决办法

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

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

  • 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添加垂直方向滚轴效果

    效果图预览 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

  • Bootstrap实现提示框和弹出框效果

    Bootstrap实现提示框和弹出框效果

    首先讲一讲提示框(Tooltip) 的使用方法 样式文件: LESS版本:对应源文件 tooltips.less <style id="jsbin-css"> body { padding: 100px; } .btn { margin: 20px 10px 20px; } </style> </head> <body> <h3>按钮做的提示框</h3> <button type="button&q

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

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

    为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息. 插件依赖 弹出框依赖工具提示插件,因此需要先加载工具提示插件. 选择性加入的功能 出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说你必须自己初始化他们. 弹出框在按钮组和输入框组中使用时,需要额外的设置 当提示框与.btn-group 或 .input-group联合使用时,你需要指定container: 'body'选项(见下面的文档)以避免不需要的副作用(例如,当弹出框显示之

随机推荐