bootstrap中popover.js(彈出框)使用總結+案例
阿新 • • 發佈：2019-01-26
bootstrap中popover(彈出框)使用總結+案例
一. popover常用配置引數：
//常用配置引數：
$(document).ready(function() {
$('#temp').popover(
{
trigger:'click', //觸發方式
template: '', //你自定義的模板
title:"標題",//設定 彈出框 的標題
html: true, // 為true的話，data-content裡就能放html程式碼了
content:"" 二. 案例分析：
案例要求：動態產生一個按鈕，並給頁面中所有具有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" - 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")
});