這篇文章主要介紹“bootstrap怎么設(shè)置懸浮窗”，在日常操作中，相信很多人在bootstrap怎么設(shè)置懸浮窗問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”bootstrap怎么設(shè)置懸浮窗”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司專業(yè)網(wǎng)站設(shè)計、網(wǎng)站制作，集網(wǎng)站策劃、網(wǎng)站設(shè)計、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營銷、軟文發(fā)布平臺等專業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計，讓網(wǎng)站在運行后，在搜索中有好的表現(xiàn)，專業(yè)設(shè)計制作為您帶來效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

bootstrap設(shè)置懸浮窗的方法：1、創(chuàng)建Html代碼；2、定義一個超鏈接，并引入相應(yīng)頁面的css和js；3、通過bootstrap的popover插件實現(xiàn)懸浮窗效果即可。

本文操作環(huán)境：Windows7系統(tǒng)、bootsrap3.3.7版、DELL G3電腦

bootstrap如何設(shè)置懸浮窗?

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

經(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 屬性名稱 描述

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();  
    }  
  }); 
});

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

//模擬動態(tài)加載標(biāo)題(真實情況可能會跟后臺進行ajax交互) 
function title() { 
  return '田喜碧Hebe(節(jié)制的人生)'; 
} 
 
//模擬動態(tài)加載內(nèi)容(真實情況可能會跟后臺進行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)注成功'); 
}

查看效果：

到此，關(guān)于“bootstrap怎么設(shè)置懸浮窗”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

網(wǎng)站標(biāo)題：bootstrap怎么設(shè)置懸浮窗
分享地址：http://chinadenli.net/article0/giejoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、定制開發(fā)、ChatGPT、關(guān)鍵詞優(yōu)化、標(biāo)簽優(yōu)化、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)