快捷導(dǎo)航

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

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

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

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

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

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

定義一個(gè)超鏈接，同時(shí)需注意相應(yīng)頁(yè)面的必要的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"指定彈窗相對(duì)于超鏈接顯示的位置，data-trigger="hover"則是關(guān)鍵，指定懸浮時(shí)觸發(fā)彈窗顯示。。

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

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

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

常見方法：

方法描述實(shí)例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')

好了，下面重點(diǎn)是Js部分。

$(function() { 
  $("[data-toggle='popover']").popover({ 
    html : true,  
    title: title(),  
    delay:{show:500, hide:1000}, 
    content: function() { 
     return content();  
    }  
  }); 
});

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

//模擬動(dòng)態(tài)加載標(biāo)題(真實(shí)情況可能會(huì)跟后臺(tái)進(jìn)行ajax交互) 
function title() { 
  return '田喜碧Hebe(節(jié)制的人生)'; 
} 
 
//模擬動(dòng)態(tài)加載內(nèi)容(真實(shí)情況可能會(huì)跟后臺(tá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>臺(tái)灣</li>" + 
       "<input id='btn' type='button' value='關(guān)注' onclick='test()'/></form>"); 
   
  return data; 
} 
//模擬懸浮框里面的按鈕點(diǎn)擊操作 
function test() { 
  alert('關(guān)注成功'); 
}

查看效果：