bootstrap如何設定懸浮窗

bootstrap設定懸浮窗的方法：1、建立Html程式碼；2、定義一個超鏈接，並引入對應頁面的css和js；3、透過bootstrap的popover插件實現懸浮窗效果即可。

本文操作環境：Windows7系統、bootsrap3.3.7版、DELL G3電腦

bootstrap如何設定懸浮視窗?

使用BootStrap實現懸浮視窗的效果

經常玩社群網站的想必對這樣一種場景很常見，如圖：

滑鼠停在某個超連結上，然後會出現一個懸浮框，內容時該帳號的一些資訊。

剛好最近在做一些前端的東東，牽涉到類似的需求。 ——滑鼠懸停，出現一個懸浮框，懸浮框描述一些具體資訊。之前其實參考了網路上的一篇文章，但我覺得有點過於複雜。 。而發現：神奇的 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=&#39;true&#39; class=&#39;icon_globe&#39;></span> <font>粉丝数:</font>7389223</li>" + 
       "<li><span aria-hidden=&#39;true&#39; class=&#39;icon_piechart&#39;></span> <font>关注:</font>265</li>" + 
       "<li><span aria-hidden=&#39;true&#39; class=&#39;icon_search_alt&#39;></span> <font>微博:</font>645</li>" + 
       "<li><span aria-hidden=&#39;true&#39; class=&#39;icon_pens_alt&#39;></span> <font>所在地:</font>台湾</li>" + 
       "<input id=&#39;btn&#39; type=&#39;button&#39; value=&#39;关注&#39; onclick=&#39;test()&#39;/></form>"); 
   
  return data; 
} 
//模拟悬浮框里面的按钮点击操作 
function test() { 
  alert(&#39;关注成功&#39;); 
}

查看效果：

推荐学习：《bootstrap使用教程》

以上是bootstrap如何設定懸浮窗的詳細內容。更多資訊請關注PHP中文網其他相關文章！