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. poj-2528线段树练习

    title: poj-2528线段树练习 date: 2018-10-13 13:45:09 tags: acm 刷题 categories: ACM-线段树 概述 这道题坑了我好久啊啊啊啊,,,, ...

  2. JAVAEE——宜立方商城10：使用freemarker实现网页静态化、ActiveMq同步生成静态网页、Sso单点登录系统分析

    1. 学习计划 1.使用freemarker实现网页静态化 2.ActiveMq同步生成静态网页 2. 网页静态化 可以使用Freemarker实现网页静态化. 2.1. 什么是freemarker ...

  3. 内核启动文件系统后第一个执行的文件（inittab启动脚本分析）

    Linux 开机脚本启动顺序: 第一步:启动内核 第二步:执行init (配置文件/etc/inittab) 第三步:启动相应的脚本,执行inittab脚本,并且执行里面的脚本/etc/init.d ...

  4. 直接插入排序（高级版）之C++实现

    直接插入排序(高级版)之C++实现 一.源代码:InsertSortHigh.cpp /*直接插入排序思想: 假设待排序的记录存放在数组R[1..n]中.初始时,R[1]自成1个有序区,无序区为R[2 ...

  5. WM_COMMAND介绍和用法(转)

    WM_COMMAND产生的条件:点击菜单, 点击加速键,点击子窗口按钮,点击工具栏按钮.这些时候都有command消息产生. WM_COMMAND消息中有两个参 数,wparam.lparam,定义如 ...

  6. 使用Chrome快速实现数据的抓取（三）——JQuery

    使用Chrome抓取页面一个非常方便的地方就是它可以执行JS,也就是说我们可以通过JS函数获取我们想要的数据.一个非常强大易用的库就是Jquery,本文就简单的介绍一下使用Chrome获取数据时Jqu ...

  7. OPC and .NET

    Note: recent OPC standards, including Unified Architecture (UA) and Express Interface (Xi) were desi ...

  8. fedora 系统 能够以 root 用户进行登录

    1. 切换到root工作环境,因为一下操作必须拥有root权限 [haore147@localhost ~]$ su root 密码: 2. 编辑/etc/pam.d/gdm [root@localh ...

  9. chromium对网页获取favicon

    每一个网页都有一个favicon,在历史记录的保存中须要用到.在content文件夹下,这个没有实现. 以下说一下我的实现过程: web_contents_impl.cc文件里有方法:WebConte ...

  10. List 集合转换为String

    开发中会用到把 List<string>  的内容拼接成以逗号分隔的字符串的形式,现总结如下: 方法一: public String listToString(List list, cha ...