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

2019-11-19 18:31:05

字體：大中小

供稿：網(wǎng)友

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

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

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

定義一個(gè)超鏈接，同時(shí)需注意相應(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)鍵，指定懸浮時(shí)觸發(fā)彈窗顯示。。

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

選項(xiàng)名稱類型/默認(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 時(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ù) - 對 manual 手動(dòng)觸發(fā)類型不適用。如果提供的是一個(gè)數(shù)字，那么延遲將會(huì)應(yīng)用于顯示和隱藏。如果提供的是對象，結(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();      }    }); });

而我們來模擬下動(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> <font>粉絲數(shù):</font>7389223</li>" +        "<li><span aria-hidden='true' class='icon_piechart'></span> <font>關(guān)注:</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>臺(tái)灣</li>" +        "<input id='btn' type='button' value='關(guān)注' onclick='test()'/></form>");      return data; } //模擬懸浮框里面的按鈕點(diǎn)擊操作 function test() {   alert('關(guān)注成功'); }

查看效果：