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. OptParse选项工具模块

    OptParse是一个从Python2.3版本起引入的一个编写命令行工具模块,示例如下 ######example.py###### import optparse if __name__ == &q ...

  2. iOS 11开发教程（三）运行第一个iOS 11程序

    iOS 11开发教程(三)运行第一个iOS 11程序 运行iOS11程序 创建好项目之后,就可以运行这个项目中的程序了.单击运行按钮,如果程序没有任何问题的话,会看到如图1.6和1.7的运行效果. 图 ...

  3. 【Floyd矩阵乘法】BZOJ1706- [usaco2007 Nov]relays 奶牛接力跑

    [题目大意] 给出一张无向图,求出恰巧经过n条边的最短路. [思路] 首先题目中只有100条边,却给出了10000个点(实际上最多只能有200个),离散化一下. 后面就是Floyd的新姿势,以前看过的 ...

  4. Java并发（十九）：final实现原理

    final在Java中是一个保留的关键字,可以声明成员变量.方法.类以及本地变量. 一旦你将引用声明作final,你将不能改变这个引用了,编译器会检查代码,如果你试图将变量再次初始化的话,编译器会报编 ...

  5. 对于asp.net mvc异步查询

    如何做MVC异步查询,做列表页面. 查询是项目中必不可少的工作,而且不同的项目不同的团队,都有自己的简单方法.Asp.net mvc 有自己独特的优势,下面是结合mvc实现一个产品列表的Demo. 问 ...

  6. Java_基础知识回顾

    1.ByteArrayInputStream. ByteArrayOutputStream String str = "ZHANGSAN"; //System.out.printl ...

  7. Git_从远程库克隆

    上次我们讲了先有本地库,后有远程库的时候,如何关联远程库. 现在,假设我们从零开发,那么最好的方式是先创建远程库,然后,从远程库克隆. 首先,登陆GitHub,创建一个新的仓库,名字叫gitskill ...

  8. unix环境高级编程----进程控制wait（）

    一.wait()函数 当一个进程中调用wait()函数的时候 (1)假设其全部的子程序都还在执行,则堵塞 (2)假设一个子进程已终止.则等待父进程获取其终止状态. (3)假设没有子进程,则返回错误. ...

  9. VS中运行HTTP 无法注册URL

    参考资料 http://www.java123.net/detail/view-449670.html http://www.cnblogs.com/jiewei915/archive/2010/06 ...

  10. MVC文件上传07-使用客户端jQuery-File-Upload插件和服务端Backload组件裁剪上传图片

    本篇通过在配置文件中设置,对上传图片修剪后保存到指定文件夹. 相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  MVC文件上传02-使用HttpPostedFileB ...