BootStrap自定義popover,點(diǎn)擊區(qū)域隱藏功能的實(shí)現(xiàn)
更新時(shí)間：2018年01月23日 09:15:41 作者：lxyamxj
下面小編就為大家分享一篇BootStrap自定義popover,點(diǎn)擊區(qū)域隱藏功能的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
當(dāng)用bootstrap時(shí)，經(jīng)常需要在某個(gè)地方添加幫助按鈕，點(diǎn)擊或者鼠標(biāo)懸浮時(shí)，提示幫助信息，然而，bt給我們提供的方法里貌似沒(méi)有，如果有哪位大神知道bootstrap有的可以留言，小弟學(xué)習(xí)了：代碼如下
之前的按鈕必須定義class為pop；
$(function(){
$(".pop").popover({placement:'right', trigger:'manual', delay: {show: 10, hide: 10}, html: true,
title: function () {
return $("#data-original-title").html();
},
content: function () {
return $("#data-content").html(); // 把content變成html
}});
$('body').click(function (event) {
var target = $(event.target); // 判斷自己當(dāng)前點(diǎn)擊的內(nèi)容
if (!target.hasClass('popover')
&& !target.hasClass('pop')
&& !target.hasClass('popover-content')
&& !target.hasClass('popover-title')
&& !target.hasClass('arrow')) {
$('.pop').popover('hide'); // 當(dāng)點(diǎn)擊body的非彈出框相關(guān)的內(nèi)容的時(shí)候，關(guān)閉所有popover
}
});
$(".pop").click(function (event) {
$('.pop').popover('hide'); // 當(dāng)點(diǎn)擊一個(gè)按鈕的時(shí)候把其他的所有內(nèi)容先關(guān)閉。
$(this).popover('toggle'); // 然后只把自己打開。
});
});
--------代碼非原創(chuàng)，借鑒網(wǎng)上大神，純粹自己學(xué)習(xí)記錄而已，勿噴！
以上這篇BootStrap自定義popover,點(diǎn)擊區(qū)域隱藏功能的實(shí)現(xiàn)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于JavaScript+HTML5 實(shí)現(xiàn)打地鼠小游戲邏輯流程圖文詳解(附完整代碼)
打地鼠小游戲大家都喜歡玩，本文是以html編寫的，并且使用HBulider軟件進(jìn)行編寫的，下面通過(guò)本文給大家分享基于JavaScript+HTML5 實(shí)現(xiàn)打地鼠小游戲邏輯流程圖文詳解，需要的朋友參考下吧2017-11-11
node.js使用nodemailer發(fā)送郵件實(shí)例
這篇文章主要介紹了node.js使用nodemailer發(fā)送郵件的方法,例子中使用的是QQ郵箱,你也可以修改成其它的郵箱如163、gmail等,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了javascript里使用php代碼的方法,以實(shí)例形式展示了javascript與php代碼混編的應(yīng)用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12
JavaScript數(shù)據(jù)類型和變量_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)類型和變量的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)表格隔行變色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了微信小程序反編譯的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
使用純JS代碼判斷字符串中有多少漢字的實(shí)現(xiàn)方法(超簡(jiǎn)單實(shí)用)
這篇文章主要給大家介紹了js判斷字符串中有多少漢字的實(shí)現(xiàn)方法然后給大家分享了使用JS判斷輸入字符串長(zhǎng)度的兩種方法，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-11-11
從javascript語(yǔ)言本身談項(xiàng)目實(shí)戰(zhàn)
從javascript語(yǔ)言本身談項(xiàng)目實(shí)戰(zhàn)...2006-12-12
這篇文章主要介紹了一些老手都不一定知道的JavaScript技巧,需要的朋友可以參考下2014-05-05
JavaScript中所有的任務(wù)分為同步任務(wù)與異步任務(wù)，同步任務(wù)，顧名思義就是立即執(zhí)行的任務(wù)，它一般是直接進(jìn)入到主線程中執(zhí)行,這篇文章主要介紹了JS定時(shí)器不可靠的原因及解決方案,需要的朋友可以參考下2022-01-01