bootstrap中popover(弹出框)使用总结+案例
bootstrap的官方文档(不过是英文的)
一. 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')
二. 案例分析:
案例要求:动态产生一个按钮,并给页面中所有具有data-toggle=”popover”属性的元素绑定popover(弹出框)效果,触发方式:当鼠标指针放到元素上时弹出弹出框,离开元素时,弹出框消失;弹出框内容要求:一定要包含该触发弹窗元素的文本信息;
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>
- 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>
- 效果图:
-
遇到的一些小问题:
- 弹出框的最大宽度有默认值:276px;(bootstrap.css)
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
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;
}
如果在里面嵌入一个表格,表格的宽度超过了弹出层的宽度,那么表格就会溢出,如图:
可以修改或者覆盖.popover
的属性,如果只在一个页面中需要修改在其他页面不需要修改时,则可以在这个页面修改.popover
的属性,这是我在项目中的修改:
.popover {
width:auto;
max-width:800px;
}
效果如图:
可见表格正常显示。
2.如果给多个按钮一起绑定了popover
,但是在使用的时候只想让一次只出现一个弹出层,如果在点击的时候设置其他绑定了popover
弹出层隐藏,再让点击的这一个弹出层显示,如下:
$("button").popover({placement:"left",title:"这是一个弹出层",content:"这特么的是内容!",trigger:" click"});
$("button").each(function(){
$(".popover").hide(); //或者$(".popover").popover("hide");
$(this).popover("show")
});
这样在显示的时候是没有问题的,但是在第二次或以后再次点击已经被隐藏的弹出层按钮的时候,弹出层会闪动一下,效果不好看。
后来又研究了一下,popover
的触发方式有四种,分别是:hover
、click
、focus
、manual
,其中manual
是手动触发,即使用$(element).popover("show")
和$(element).popover("hide")
的方式,那么我们可以将所有绑定了popover
的按钮的trigger
改为manual
,在每个事件中将其他所有.popover
隐藏,将点击的这个显示,这样便不会出现画面一闪的情况。
$("button").popover({placement:"left",title:"这是一个弹出层",content:"这特么的是内容!",trigger:" manual"});
$("button").each(function(){
$(".popover").popover("hide");
$(this).popover("show")
});