使用BootStrap實現(xiàn)懸浮窗口的效果

更新時間：2016年12月13日 17:23:45 投稿：mrr

本文給大家分享使用BootStrap實現(xiàn)懸浮窗口的效果，神奇的 bootstrap就自帶了這個功能。所以就用bootstrap的popover插件做了，效果還不錯，感興趣的朋友參考下吧

經(jīng)常玩社群網(wǎng)站的想必對這樣一種場景很常見，如圖：

鼠標(biāo)停在某個超鏈接上，然后會出現(xiàn)一個懸浮框，內(nèi)容時該賬號的一些信息。

剛好最近在做一些前端的東東，涉及到類似的需求?！髽?biāo)懸停，出現(xiàn)一個懸浮框，懸浮框描述一些具體信息。之前其實參考了網(wǎng)上的一篇文章，但覺得有點兒過于復(fù)雜。。而發(fā)現(xiàn)：神奇的 bootstrap就自帶了這個功能。所以就用bootstrap的popover插件做了，效果還不錯。雖然挺簡單的，但還是紀(jì)念一下……

定義一個超鏈接，同時需注意相應(yīng)頁面的必要的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"則是關(guān)鍵，指定懸浮時觸發(fā)彈窗顯示。。

關(guān)于bootstrap之popover插件的一些常見屬性如下：

選項名稱類型/默認(rèn)值 Data 屬性名稱描述

animation	boolean 默認(rèn)值：true	data-animation	向彈出框應(yīng)用 CSS 褪色過渡效果。
html	boolean 默認(rèn)值：false	data-html	向彈出框插入 HTML。如果為 false，jQuery 的 text 方法將被用于向 dom 插入內(nèi)容。如果您擔(dān)心 XSS 攻擊，請使用 text。
placement	string\|function 默認(rèn)值：top	data-placement	規(guī)定如何定位彈出框（即 top\|bottom\|left\|right\|auto）。當(dāng)指定為 auto 時，會動態(tài)調(diào)整彈出框。例如，如果 placement 是 "auto left"，彈出框?qū)M可能顯示在左邊，在情況不允許的情況下它才會顯示在右邊。
selector	string 默認(rèn)值：false	data-selector	如果提供了一個選擇器，彈出框?qū)ο髮⒈晃傻街付ǖ哪繕?biāo)。
title	string \| function 默認(rèn)值：''	data-title	如果未指定 title 屬性，則 title 選項是默認(rèn)的 title 值。
trigger	string 默認(rèn)值：'hover focus'	data-trigger	定義如何觸發(fā)彈出框： click\| hover \| focus \| manual。您可以傳遞多個觸發(fā)器，每個觸發(fā)器之間用空格分隔。
delay	number \| object 默認(rèn)值：0	data-delay	延遲顯示和隱藏彈出框的毫秒數(shù) - 對 manual 手動觸發(fā)類型不適用。如果提供的是一個數(shù)字，那么延遲將會應(yīng)用于顯示和隱藏。如果提供的是對象，結(jié)構(gòu)如下所示： delay:{ show:500, hide:100}
container	string \| false 默認(rèn)值：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();  
    }  
  }); 
});

而我們來模擬下動態(tài)加載懸浮框的標(biāo)題和內(nèi)容：

//模擬動態(tài)加載標(biāo)題(真實情況可能會跟后臺進(jìn)行ajax交互) 
function title() { 
  return '田喜碧Hebe(節(jié)制的人生)'; 
} 
 
//模擬動態(tài)加載內(nèi)容(真實情況可能會跟后臺進(jìn)行ajax交互) 
function content() { 
  var data = $("<form><ul><li><span aria-hidden='true' class='icon_globe'></span>&nbsp;<font>粉絲數(shù):</font>7389223</li>" + 
       "<li><span aria-hidden='true' class='icon_piechart'></span>&nbsp;<font>關(guān)注:</font>265</li>" + 
       "<li><span aria-hidden='true' class='icon_search_alt'></span>&nbsp;<font>微博:</font>645</li>" + 
       "<li><span aria-hidden='true' class='icon_pens_alt'></span>&nbsp;<font>所在地:</font>臺灣</li>" + 
       "<input id='btn' type='button' value='關(guān)注' onclick='test()'/></form>"); 
   
  return data; 
} 
//模擬懸浮框里面的按鈕點擊操作 
function test() { 
  alert('關(guān)注成功'); 
}

查看效果：