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

bootstrap中popover.js(弹出框)使用总结+案例
时间 2015-08-01 19:52:00 博客园精华区
原文 http://www.cnblogs.com/willingtolove/p/4694573.html
主题 Bootstrap
bootstrap中popover.js(弹出框)使用总结+案例
*bootstrap官方说明：http://v3.bootcss.com/javascript/#popovers

一. popover常用配置参数：

1 //常用配置参数：
2 $(document).ready(function() {
3 $(’#temp’).popover(
4 {
5 trigger:‘click’, //触发方式
6 template: ‘’, //你自定义的模板
7 title:“标题”,//设置 弹出框 的标题
8 html: true, // 为true的话，data-content里就能放html代码了
9 content:"",//这里可以直接写字符串，也可以 是一个函数，该函数返回一个字符串；
10 }
11 );
12 }
13 //常用方法：
14 $(’#element’).popover(‘show’);
15 $(’#element’).popover(‘hide’);
16 $(’#element’).popover(‘destroy’)
二. 案例分析：

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

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

1
2 弹出框1
3 弹出框2
4
5

6

7
3. js代码：

4. 效果图：

*tips ：

1. 弹出框的最大宽度有默认值：275px；（bootstrap.min.css）
   1 .popover {
   2 position: absolute;
   3 top: 0;
   4 left: 0;
   5 z-index: 1060;
   6 display: none;
   7 max-width: 2000px;//我改为了2000px
   8 padding: 1px;
   9 font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;
   10 font-size: 14px;
   11 font-style: normal;
   12 font-weight: 400;
   13 line-height: 1.42857143;
   14 text-align: left;
   15 text-align: start;
   16 text-decoration: none;
   17 text-shadow: none;
   18 text-transform: none;
   19 letter-spacing: normal;
   20 word-break: normal;
   21 word-spacing: normal;
   22 word-wrap: normal;
   23 white-space: normal;
   24 background-color: #fff;
   25 -webkit-background-clip: padding-box;
   26 background-clip: padding-box;
   27 border: 1px solid #ccc;
   28 border: 1px solid rgba(0,0,0,.2);
   29 border-radius: 6px;
   30 -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
   31 box-shadow: 0 5px 10px rgba(0,0,0,.2);
   32 line-break: auto;
   33 }