經常玩社群網站的想必對這樣一種場景很常見，如圖：
鼠標停在某個超鏈接上，然後會出現一個懸浮框，內容時該賬號的一些信息。
剛好最近在做一些前端的東東，涉及到類似的需求。——鼠標懸停，出現一個懸浮框，懸浮框描述一些具體信息。之前其實參考了網上的一篇文章，但覺得有點兒過於復雜。。而發現：神奇的 bootstrap就自帶了這個功能。所以就用bootstrap的popover插件做了，效果還不錯。雖然挺簡單的，但還是紀念一下……
定義一個超鏈接，同時需注意相應頁面的必要的css和js必須引入：
Html代碼
<link href="css/bootstrap.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <a href="#" class="bind_hover_card" data-toggle="popover" data-placement="bottom" data-trigger="hover"><img class="commentAvatarImage" src="img/social_dribbble.png" /></a>
data-toggle="popover"屬性則為該超鏈接綁定彈窗效果，data-placement="bottom"指定彈窗相對於超鏈接顯示的位置，data-trigger="hover"則是關鍵，指定懸浮時觸發彈窗顯示。。
關於bootstrap之popover插件的一些常見屬性如下：
選項名稱 類型/默認值 Data 屬性名稱 描述
animation
boolean
默認值：true
data-animation
向彈出框應用 CSS 褪色過渡效果。
html
boolean
默認值：false
data-html
向彈出框插入 HTML。如果為 false，jQuery 的 text 方法將被用於向 dom 插入內容。如果您擔心 XSS 攻擊，請使用 text。
placement
string|function
默認值：top
data-placement
規定如何定位彈出框（即 top|bottom|left|right|auto）。
當指定為 auto 時，會動態調整彈出框。例如，如果 placement 是 "auto left"，彈出框將會盡可能顯示在左邊，在情況不允許的情況下它才會顯示在右邊。
selector
string
默認值：false
data-selector
如果提供了一個選擇器，彈出框對象將被委派到指定的目標。
title
string | function
默認值：''
data-title
如果未指定 title 屬性，則 title 選項是默認的 title 值。
trigger
string
默認值：'hover focus'
data-trigger
定義如何觸發彈出框： click| hover | focus | manual。您可以傳遞多個觸發器，每個觸發器之間用空格分隔。
delay
number | object
默認值：0
data-delay
延遲顯示和隱藏彈出框的毫秒數 - 對 manual 手動觸發類型不適用。如果提供的是一個數字，那麼延遲將會應用於顯示和隱藏。如果提供的是對象，結構如下所示：
delay:{ show:500, hide:100}
container
string | false默認值：false data-container 向指定元素追加彈出框。
實例： container: 'body'
常見方法：
方法描述實例Options: .popover(options)向元素集合附加彈出框句柄。
$().popover(options)
Toggle: .popover('toggle')切換顯示/隱藏元素的彈出框。
$('#element').popover('toggle')
Show: .popover('show')顯示元素的彈出框。
$('#element').popover('show')
Hide: .popover('hide')隱藏元素的彈出框。
$('#element').popover('hide')
Destroy: .popover('destroy')隱藏並銷毀元素的彈出框。
$('#element').popover('destroy')
好了，下面重點是Js部分。
$(function() {
$("[data-toggle='popover']").popover({
html : true,
title: title(),
delay:{show:500, hide:1000},
content: function() {
return content();
}
});
});
而我們來模擬下動態加載懸浮框的標題和內容：
//模擬動態加載標題(真實情況可能會跟後台進行ajax交互)
function title() {
return '田喜碧Hebe(節制的人生)';
}
//模擬動態加載內容(真實情況可能會跟後台進行ajax交互)
function content() {
var data = $("<form><ul><li><span aria-hidden='true' class='icon_globe'></span> <font>粉絲數:</font>7389223</li>" +
"<li><span aria-hidden='true' class='icon_piechart'></span> <font>關注:</font>265</li>" +
"<li><span aria-hidden='true' class='icon_search_alt'></span> <font>微博:</font>645</li>" +
"<li><span aria-hidden='true' class='icon_pens_alt'></span> <font>所在地:</font>台灣</li>" +
"<input id='btn' type='button' value='關注' onclick='test()'/></form>");
return data;
}
//模擬懸浮框裡面的按鈕點擊操作
function test() {
alert('關注成功');
}
查看效果：
以上所述是小編給大家介紹的使用BootStrap實現懸浮窗口的效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！