popover被挤压、遮挡的问题：

　　弹出框显示的时候如果贴近一个列的边沿，就会很窄或被遮挡，解决起来很简单，只需在初始化的时候添加一个container属性就可以了：

$(function (){

　　$("[data-toggle='popover']").popover({

　　　　trigger: 'hover',

　　　　container: 'body'

　　});

});

用法：1、bootstrap.js或bootstrap.min.js；2、jQuery.min.js；3、bootstrap.min.css引入三个文件

bootstrap官方说明：http://v3.bootcss.com/javascript/#popovers

一、popover常用配置参数：

JS方式：

//常用配置参数：

$(document).ready(function() {

    $('#temp').popover({

         trigger:'hover', //触发方式

         template: '', //你自定义的模板

         title:"标题",//设置弹出框的标题

         html: true, // 为true的话，data-content里就能放html代码了

         content:"",//这里可以直接写字符串，也可以是一个函数，该函数返回一个字符串；

    });

}

//常用方法：

$('#element').popover('show');

$('#element').popover('hide');

$('#element').popover('destroy');

html方式：

<a tabindex="" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" 
data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>

二、属性方法：

popover调用示例如下：

//简单调用

$(".js-btn-top").popover({

    placement:"top",    //定位方向

    title:"jquery插件",  //如果不需要标题就不要配置这个选项

    content:"内容：建站"

});

//html:true会解析html标签

$(".js-btn-bottom").popover({

    trigger:"focus",    //如果设为focus 当按钮失去焦点提示层会消失，例如页面空白处单机提示层消失

    placement:"bottom",

    html:true,

    content:'<p style="width: 500px;">html:true会解析html标签哦，<a href="http://www.51xuediannao.com/" target="_blank">建站</a></p><p>你也试试吧！</p>'

}); 

//事件其实就是一些回调一样的东西，比如隐藏事件hidden，在提示层完全隐藏的时候会触发里面的处理逻辑

$(".js-btn-bottom").on('hidden.bs.popover', function () {

   // 执行一些动作...

   //这里面的this就是点击的按钮自身

   alert();

})

案例分析：

　　动态产生一个按钮，并给页面中所有具有data-toggle="popover"属性的元素绑定popover(弹出框)效果，

　　触发方式：当鼠标指针放到元素上时，弹出弹出框，离开元素时，弹出框消失；弹出框内容要求：一定要包含该触发弹窗元素的文本信息；

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title></title>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">

</head>

<body>

<div id="main">

    <a id="temp1" tabindex="" class="btn btn-lg btn-danger" role="button" data-toggle="popover" title="Dismissible popover">弹出框1</a>

    <a id="temp2" tabindex="" class="btn btn-lg btn-danger" role="button" data-toggle="popover">弹出框2</a>

    <div id="LinkDIV" style="float:left;width:200px"></div>

</div>

<style type="text/css">

.popover{

    max-width: 2000px;/*popover有默认最大宽度276px，所以需要重写下*/

}

</style>

<script>

$(function () {

    $("#LinkDIV").html('<button type="btn btn-lg btn-primary" data-toggle="popover" id="temp3">弹出框3</button>');

    $('[data-toggle="popover"]').each(function () {

        var element = $(this);

        var txt = element.html();

        element.popover({

            trigger: 'hover',

            placement: 'bottom', //top, bottom, left or right

            title: txt,

            html: 'true',

            content: ContentMethod(txt)

        })

    });

});

function ContentMethod(txt) {

    return '<table class="table table-bordered"><tr><td>' + txt + '</td><td>BB</td><td>CC</td><td>DD</td></tr>' +

            '<tr><td>' + txt + '</td><td>BB</td><td>CC</td><td>DD</td></tr>' +

            '<tr><td>' + txt + '</td><td>BB</td><td>CC</td><td>DD</td></tr>'+

            '<tr><td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td><td>BB</td><td>CC</td><td>DD</td></tr></table>';

}

</script>

</body>

</html>

效果图：html结构中的属性的值优先于JS函数中的值。

Bootstrap popover弹出框的更多相关文章

  1. Bootstrap：弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

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

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  3. Bootstrap模态弹出框

    前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...

  4. Bootboxjs快速制作Bootstrap的弹出框效果

    Bootboxjs是一个简单的js库,简单快捷帮你制作一个Bootstrap的弹出框效果. 一.简介 bootbox.js是一个小的JavaScript库,它帮助您在使用bootstrap框架的时候快 ...

  5. [Bootstrap]modal弹出框

    写在前面 在实际开发中,为了友好,更需要一种美观的弹出框,js原生的alert,很难满足需求.这里推荐一个bootstrap的弹出框. 一个例子 先看效果吧 代码: <!DOCTYPE html ...

  6. php中bootstrap框架.popover弹出框，鼠标移动到上面自动显示，离开自动消失

    <div rel="name"></div> <script> $(function(){//显示弹出框 $("[rel=name]& ...

  7. popover弹出框

    <style> #view{width: 300px;height: 200px;border: 1px solid red;} </style> 以上是为了viewport更 ...

  8. bootstrap的弹出框

    data-toggle="popover";//以弹出框事件触发 data-content="弹出框中内容"; data-placement="弹出框 ...

  9. Bootstrap实现弹出框和提示框效果代码

    一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...

随机推荐

  1. JDK源码分析(三)——HashMap 上（基于JDK7）

    目录 HashMap概述 内部字段及构造方法 存储元素 扩容 取出元素 删除元素 判断 总结 HashMap概述   前面我们分析了基于数组实现的ArrayList和基于双向链表实现的LinkedLi ...

  2. Python闭包Closure 2

    由于Python中,变量作用域为LEGB,所以在函数内部可以读取外部变量,但是在函数外不能读取函数内的变量.但是出于种种原因,我们需要读取函数内的变量时候怎么办?那就是在函数内在加一个函数. def ...

  3. 解决mongo 端口占用问题

    在打开mongod之后如果不用了就按ctrl + c ,就不会出现以下的问题了 执行mongod报错 mongod 2016-08-03T14:31:15.691+0800 I CONTROL [in ...

  4. Django Q对象

    使用Q 对象进行复杂的查询¶ filter() 等方法中的关键字参数查询都是一起进行“AND” 的. 如果你需要执行更复杂的查询(例如OR 语句),你可以使用Q 对象. Q 对象 (django.db ...

  5. Struts2的概念

    Struts2的概念 Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数 ...

  6. [BZOJ4487][JSOI2015]染色问题(容斥)

    一开始写了7个DP方程,然后意识到这种DP应该都会有一个通式. 三个条件:有色行数为n,有色列数为m,颜色数p,三维容斥原理仍然成立. 于是就是求:$\sum_{i=0}^{n}\sum_{j=0}^ ...

  7. 20162307 课堂测试 hash

    20162307 课堂测试 hash 作业要求 利用除留余数法为下列关键字集合的存储设计hash函数,并画出分别用开放寻址法和拉链法解决冲突得到的空间存储状态(散列因子取0.75) 关键字集合:85, ...

  8. BZOJ3473 字符串 广义后缀自动机

    今天主攻了下SAM 好多东西以前都没理解到 对于这道题 我们建一个自动机存所有串 每个穿last从1开始 对于自动机上每个点额外记一个cnt 表示能匹配到这个点的不同串个数 建完对每个串在自动机上匹配 ...

  9. Codeforces Round #280 (Div. 2) D. Vanya and Computer Game 预处理

    D. Vanya and Computer Game time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  10. LAMP架构之NFS

    需求分析: 前端需支持更大的访问量,单台Web服务器已无法满足需求了,则需扩容Web服务器: 虽然动态内容可交由后端的PHP服务器执行,但静态页面还需要Web服务器自己解析,那是否意味着多台Web服务 ...