bootstrap中popover.js(弹出框)使用总结+案例

*转载请注明出处：

作者：willingtolove；

http://www.cnblogs.com/willingtolove/p/4694573.html

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

一. popover常用配置参数：

 //常用配置参数：

 $(document).ready(function() {

             $('#temp').popover(

                 {

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

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

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

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

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

                 }

             );

         }

 //常用方法：

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

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

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

二. 案例分析：

1. 案例要求：动态产生一个按钮，并给页面中所有具有data-toggle="popover"属性的元素绑定popover(弹出框)效果，触发方式：当鼠标指针放到元素上时弹出弹出框，离开元素时，弹出框消失；弹出框内容要求：一定要包含该触发弹窗元素的文本信息；

2. html代码：（注意引入bootstrap.js和样式）

 <body>

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

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

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

     </div>

 </body>

3. js代码：

<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 id = element.attr('id');

                var txt = element.html();

                element.popover({

                    trigger: 'manual',

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

                    title: txt,

                    html: 'true',

                    content: ContentMethod(txt),

                }).on("mouseenter", function () {

                    var _this = this;

                    $(this).popover("show");

                    $(this).siblings(".popover").on("mouseleave", function () {

                        $(_this).popover('hide');

                    });

                }).on("mouseleave", function () {

                    var _this = this;

                    setTimeout(function () {

                        if (!$(".popover:hover").length) {

                            $(_this).popover("hide")

                        }

                    }, 100);

                });

            });

        });

        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>

4. 效果图：

*tips：

1. 弹出框的最大宽度有默认值：275px；（bootstrap.min.css）

 .popover {

             position: absolute;

             top:;

             left:;

             z-index:;

             display: none;

             max-width: 2000px;//我改为了2000px

             padding: 1px;

             font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

             font-size: 14px;

             font-style: normal;

             font-weight:;

             line-height: 1.42857143;

             text-align: left;

             text-align: start;

             text-decoration: none;

             text-shadow: none;

             text-transform: none;

             letter-spacing: normal;

             word-break: normal;

             word-spacing: normal;

             word-wrap: normal;

             white-space: normal;

             background-color: #fff;

             -webkit-background-clip: padding-box;

             background-clip: padding-box;

             border: 1px solid #ccc;

             border: 1px solid rgba(0,0,0,.2);

             border-radius: 6px;

             -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);

             box-shadow: 0 5px 10px rgba(0,0,0,.2);

             line-break: auto;

         }

bootstrap中popover.js(弹出框)使用总结+案例的更多相关文章

  1. Bootstrap历练实例：弹出框(popover)事件

    事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...

  2. 【转】js弹出框、对话框、提示框、弹窗总结

    js弹出框.对话框.提示框.弹窗总结 一.js的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...

  3. js js弹出框、对话框、提示框、弹窗总结

    js弹出框.对话框.提示框.弹窗总结 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...

  4. 在IOS11中position:fixed弹出框中的input出现光标错位的问题

    问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...

  5. 5月12日上课笔记-js 弹出框、函数、程序调试、基本事件、浏览器对象模型

    一.弹出框 a.提示框 alert(); b.输入框 prompt(); c.确认框 confirm(); var flag= confirm("确认删除吗?"); 二.js程序调 ...

  6. 如何妥善处理WebBrowser对Javascript的错误问题，阻止JS弹出框，提高用户体验

    由于项目需求,最近转战客户端,开始搞浏览器开发.众所周知,现在在微软平台上开发浏览器,最常用的方法就是扩展Webbrowser,但是首先要清楚的是,WebBrowser控件仅仅是对WebBrowser ...

  7. JS弹出框插件zDialog再次封装

    zDialog插件网址:http://www.jq22.com/jquery-info2426 再次封装zDialog的代码: (function ($) { $.extend({ iDialog: ...

  8. 转：WebDriver(Selenium2) 处理可能存在的JS弹出框

    在自动化测试过程中,有些情况下我们会遇到一些潜在的Javascript弹出框.(即某些条件下才会出现,不是固定出现),然后如果当这种弹出框出现,我们没有加以处理,WebDriver将无法进行下一步的操 ...

  9. WebDriver(Selenium2) 处理可能存在的JS弹出框

    http://uniquepig.iteye.com/blog/1703103 在自动化测试过程中,有些情况下我们会遇到一些潜在的Javascript弹出框.(即某些条件下才会出现,不是固定出现),然 ...

随机推荐

  1. 基于jquery实现图片拖动和曲线拖放

    功能:图片的拖动.曲线的拖放和绘制 一. 准备工作 1. 点击此下载相关的文档 二. 在浏览器中运行 dragDrop.html 文件,即可看到效果 三. 效果图

  2. 烂泥：zabbix3.0安装与配置

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 这个月又快过完了,最近也比较忙,没时间写文章,今天挤点时间把zabbix3.0安装与配置 ...

  3. tomcat优化

    tomcat优化:vim catalina.sh添加:JAVA_OPTS="-Djava.awt.headless=true -Dfile.encoding=UTF-8 -server -X ...

  4. 萌新笔记——C++里创建 Trie字典树（中文词典）（三）（联想）

    萌新做词典第三篇,做得不好,还请指正,谢谢大佬! 今天把词典的联想做好了,也是比较low的,还改了之前的查询.遍历等代码.  Orz 一样地先放上运行结果: test1 ID : char : 件 w ...

  5. monkeyrunner之坐标或控件ID获取方法-续

    在之前的文章中,介绍过控件坐标和ID的获取方法,这里,我们再介绍一个新的工具-uiautomatorviewer. Uiautomatorviewer是Android sdk自带的工具,位置在sdk/ ...

  6. PHP玩转微信公众平台自定义接口

    从微信公众平台开通自定义回复后,就一直在关注微信接口这一块,很想用自定义回复这块做个站长工具的查询,例如PR查询,备案查询等,输入网址信息,就能自动获取PR,获取备案信息,应该是一个不错的想法.不过以 ...

  7. 使用jekins自动构建部署java maven项目（jdk1.7+tomcat7.0+jenkins2.19.3）

    1.下载jenkins 地址:https://jenkins.io/index.html 本人下载了2.19.3版本的war包:jenkins.war 2.安装jenkins 拷贝jenkins.wa ...

  8. 开发管理系统时，安装sqlserver2005问题整理

    最近在为单位开发一个综合管理系统.但是由于时间的问题,有时候就把程序带回家进行修改.但是家里有没有环境,就把数据库文件和程序带回家,可是随之问题来了.要重新在家里陪着开发环境,vs2008非常快的就安 ...

  9. webform开发基础

    ASP.NET WebForm C/S(Client/Server):客户端服务器 B/S(Browser/Server):浏览器服务器 C/S和B/S的区别: 首先必须强调的是C/S和B/S并没有本 ...

  10. go interface

    //所有的结构体 都实现了空接口 //接口类型转换 结构体变量 = 接口名(实现接口的结构体变量) 只能高级转为低级 就是转前的接口中方法在转后接口中都有实现 package main import ...