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’)
二. 案例分析:
-
案例要求:动态产生一个按钮,并给页面中所有具有data-toggle="popover"属性的元素绑定popover(弹出框)效果,触发方式:当鼠标指针放到元素上时弹出弹出框,离开元素时,弹出框消失;弹出框内容要求:一定要包含该触发弹窗元素的文本信息;
-
html代码:(注意引入bootstrap.js和样式)
6
7
3. js代码:
- 效果图:
*tips :
- 弹出框的最大宽度有默认值: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 }