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. 从Table 表中取出第 m 条到第 n 条的记录

    * FROM Table id FROM Table )) --从TABLE表中取出第m到n条记录 (Exists版本) * FROM TABLE AS a WHERE Not Exists ( * ...

  2. php开启redis扩展

    1.安装redis git下载地址https://github.com/MSOpenTech/redis/releases 2.测试redis windows 运行(快捷键:windows键+R键), ...

  3. Xshell6和Xftp下载地址，rzsz的使用

    官方下载地址:https://cdn.netsarang.net/98f59c09/Xshell-6.0.0076r_beta.exe https://cdn.netsarang.net/98f59c ...

  4. java多线程技术之（callable和future）

    接着上一篇继续并发包的学习,本篇说明的是Callable和Future,它俩很有意思的,一个产生结果,一个拿到结果. Callable接口类似于Runnable,从名字就可以看出来了,但是Runnab ...

  5. 撩课-Java每天5道面试题第13天

    撩课Java+系统架构点击开始学习 96.JDBC操作数据库的步骤 ? .加载数据库驱动 .创建并获取数据库链接 .创建jdbc statement对象 .设置sql语句 .设置sql语句中的参数(使 ...

  6. 【10.10校内测试】【线段树维护第k小+删除】【lca+主席树维护前驱后驱】

    贪心思想.将a排序后,对于每一个a,找到对应的删除m个后最小的b,每次更新答案即可. 如何删除才是合法并且最优的?首先,对于排了序的a,第$i$个那么之前就应该删除前$i-1$个a对应的b.剩下$m- ...

  7. ThinkPHP中RBAC权限管理的简单应用

    RBAC英文全称(Role-Based Access Controller)即基于角色的权限访问控制,简单来讲,一个用户可以拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色-权限”的授 ...

  8. C#软件license管理（简单软件注册机制）

    最近做了一个绿色免安装软件,领导临时要求加个注册机制,不能让现场工程师随意复制.事出突然,只能在现场开发(离开现场软件就不受我们控了).花了不到两个小时实现了简单的注册机制,稍作整理.        ...

  9. C#流水号生成汇总(四)

    简单高效的ID生成方式 http://www.ikende.com/blog/6014522c24ff4ef89cfb430f9c5a8489 一个简单唯一ID生成规则 http://www.iken ...

  10. Marshal.SizeOf和sizeof的区别

    sizeof在非Unsafe环境下只能用于预定义的一系列类型,如Int,Short等等.而在Unsafe环境下,sizeof可以被用于值类型,但是值类型中不可以有引用类型,否则C#编译器会报错: er ...