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. <泛> 归并排序 及 逆序对

    今天写一个归并排序的模板,返回值为该序列的逆序对数 基本思路 归并排序就是利用二分的思想,将区间无限递归二分,直到当前划分区间只包含一个元素或没有元素的时候(我们认为这个序列是自动有序的),我们回溯到 ...

  2. 回顾2014 Java发生的5件大事

    回顾2014 Java发生的5件大事 1.2月1日:RedMonk分析师确认并宣布Java是最受欢迎和多样化的语言! 2014年,Java生态圈伴随着引擎的轰鸣起步,随着FOSDEM年会的Free J ...

  3. 特殊字符导致jquery-mobile 挂起（firefox控制台报错 malformed URI sequence）

    同事遇到一个问题,刷新页面导致页面挂起,浏览器控制台报错 malformed URI sequence, 经排查发现是引用jquery-mobile js引起的问题, 有一些中文参数在url中,当页面 ...

  4. bzoj2660: [Beijing wc2012]最多的方案

    题目链接 bzoj2660: [Beijing wc2012]最多的方案 题解 对于一个数的斐波那契数列分解,他的最少项分解是唯一的 我们在拆分成的相临两项之间分解后者,这样形成的方案是最优且不重的 ...

  5. [HNOI2011]数学作业 --- 矩阵优化

    [HNOI2011]数学作业 题目描述: 小 C 数学成绩优异,于是老师给小 C 留了一道非常难的数学作业题: 给定正整数 N 和 M ,要求计算\(Concatenate(1..N)\; Mod\; ...

  6. Mac OS下不产生.DS_Store 隐藏文件和清理.DS_Store的方法

    一.清理.DS_Store的方法 1. 打开终端 (Macintosh HD > Applications > Utilities > Terminal)2. 输入命令: " ...

  7. FLASK开发简易blog的学习笔记

    首先,学会了如何创建一个新的包.就是在文件夹下创建__init__.py文件,就是在其他地方导入这个包了.

  8. Educational Codeforces Round 13 E. Another Sith Tournament 状压dp

    E. Another Sith Tournament 题目连接: http://www.codeforces.com/contest/678/problem/E Description The rul ...

  9. NOIP 2002提高组 选数 dfs/暴力

    1008 选数 2002年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 已知 n 个整数 x1,x2,…, ...

  10. 机器学习(1)：Logistic回归原理及其实现

    Logistic回归是机器学习中非常经典的一个方法,主要用于解决二分类问题,它是多分类问题softmax的基础,而softmax在深度学习中的网络后端做为常用的分类器,接下来我们将从原理和实现来阐述该 ...