bootstrap 點(diǎn)擊空白處popover彈出框隱藏實(shí)例
代碼:
<div> <a class="btn btn-success show" title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些內(nèi)容"> aaaa </a> </div> <script> $(function () { initPopover(); }) function initPopover() { $(".show").popover({ container: "body", trigger: " manual" //手動(dòng)觸發(fā) }).on('show.bs.popover', function () { $(this).addClass("popover_open"); }).on('hide.bs.popover', function () { $(this).removeClass("popover_open"); }); $(".show").click(function () { if ($(this).hasClass("popover_open")) { $(this).popover("hide") } else { $(".popover_open").popover("hide"); $(this).popover("show"); } var e = arguments.callee.caller.arguments[0] || event; e.stopPropagation(); }); $(document).click(function () { $(".show").popover("hide"); }); } </script>
注意點(diǎn):
1、不適用于button,a、img等可用
2、show.bs.popover:當(dāng)調(diào)用show 實(shí)例方法時(shí)立即觸發(fā)該事件。
shown.bs.popover:當(dāng)彈出框?qū)ν耆珡棾鰰r(shí)觸發(fā)該事件(將等待 CSS 過(guò)渡效果完成)。
hide.bs.popover:當(dāng)調(diào)用hide 實(shí)例方法時(shí)立即觸發(fā)該事件。
hidden.bs.popover:當(dāng)工具提示完全隱藏時(shí)觸發(fā)該事件(將等待 CSS 過(guò)渡效果完成)。
3、引入jquery和bootstrap頭文件
4、取消冒泡
以上這篇bootstrap 點(diǎn)擊空白處popover彈出框隱藏實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript結(jié)合Flexbox簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)拼圖游戲
本文給大家分享的是一則使用javascript結(jié)合Flexbox簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)拼圖游戲的代碼,雖然沒(méi)有實(shí)現(xiàn)完整的功能,但是還是推薦給大家,喜歡的朋友可以繼續(xù)做完2016-02-02BootStrap daterangepicker 雙日歷控件
這篇文章主要介紹了BootStrap daterangepicker 雙日歷控件,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06JavaScript實(shí)現(xiàn)私有屬性的幾種方式小結(jié)
在JavaScript中,私有屬性是指只能在對(duì)象內(nèi)部訪問(wèn)的屬性,外部無(wú)法直接訪問(wèn),JavaScript并沒(méi)有提供官方的私有屬性的支持,但可以通過(guò)一些技巧來(lái)模擬實(shí)現(xiàn)私有屬性,所以本文給大家總結(jié)了JavaScript實(shí)現(xiàn)私有屬性的幾種方式,需要的朋友可以參考下2024-04-04使用SpreadJS快速清除Excel中工作表保護(hù)密碼
這篇文章主要為大家介紹了使用SpreadJS快速清除Excel中工作表保護(hù)密碼方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11createElement動(dòng)態(tài)創(chuàng)建HTML對(duì)象腳本代碼
利用createElement動(dòng)態(tài)創(chuàng)建鏈接,div等代碼2008-11-11用js控制組織結(jié)構(gòu)圖可以任意拖拽到指定位置
用js控制生成了一個(gè)組織結(jié)構(gòu)圖并設(shè)置這個(gè)組織結(jié)構(gòu)可以任意拖動(dòng)到指定位置,具體代碼如下2014-01-01javascript實(shí)現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類型
這篇文章主要給大家分享一段javascript實(shí)現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類型的封裝好的代碼,使用非常方便,也很實(shí)用,推薦給大家。2015-01-01