bootstrap怎么設置懸浮窗

這篇文章主要介紹“bootstrap怎么設置懸浮窗”，在日常操作中，相信很多人在bootstrap怎么設置懸浮窗問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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 屬性名稱 描述

delay:{ show:500, hide:100}

常見方法：

方法描述實例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>&nbsp;<font>粉絲數:</font>7389223</li>" + 
       "<li><span aria-hidden='true' class='icon_piechart'></span>&nbsp;<font>關注:</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='關注' onclick='test()'/></form>"); 
   
  return data; 
} 
//模擬懸浮框里面的按鈕點擊操作 
function test() { 
  alert('關注成功'); 
}

查看效果：

到此，關于“bootstrap怎么設置懸浮窗”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！