BootStrap自定義popover,點擊區(qū)域隱藏功能的實現

更新時間：2018年01月23日 09:15:41 作者：lxyamxj

下面小編就為大家分享一篇BootStrap自定義popover,點擊區(qū)域隱藏功能的實現方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

當用bootstrap時，經常需要在某個地方添加幫助按鈕，點擊或者鼠標懸浮時，提示幫助信息，然而，bt給我們提供的方法里貌似沒有，如果有哪位大神知道bootstrap有的可以留言，小弟學習了：代碼如下

之前的按鈕必須定義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);    // 判斷自己當前點擊的內容
      if (!target.hasClass('popover')
          && !target.hasClass('pop')
          && !target.hasClass('popover-content')
          && !target.hasClass('popover-title')
          && !target.hasClass('arrow')) {
        $('.pop').popover('hide');   // 當點擊body的非彈出框相關的內容的時候，關閉所有popover
      }
    });
    $(".pop").click(function (event) {
      $('.pop').popover('hide');     // 當點擊一個按鈕的時候把其他的所有內容先關閉。
      $(this).popover('toggle');     // 然后只把自己打開。
    });
  });

--------代碼非原創(chuàng)，借鑒網上大神，純粹自己學習記錄而已，勿噴！

以上這篇BootStrap自定義popover,點擊區(qū)域隱藏功能的實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JavaScript讀二進制文件并用ajax傳輸二進制流的方法
這篇文章主要介紹了JavaScript讀二進制文件并用ajax傳輸二進制流的方法的相關資料,需要的朋友可以參考下
2016-07-07
JavaScript深入刨析this的指向以及如何修改指向
JavaScript中this也是一件很神奇事情，在面向對象（比如java）中表示一個當前的對象引用，但是在JavaScript中this不是固定不變的，而是隨著運行環(huán)境的改變而改變
2021-11-11
JS實現拖動示例代碼
JS實現拖動的方法有很多，在本文將為大家介紹下使用getBoundingClientRect()方法是如何實現的，感興趣的朋友不要錯過
2013-11-11
Bootstrap框架的學習教程詳解(二)
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹Bootstrap框架的學習教程詳解，對bootstrap框架感興趣的朋友跟著小編一起學習吧
2016-10-10
AJAX請求與跨域問題解決方法詳解
學習ajax必須得掌握的就是跨域請求,實際上在不同源的地址上發(fā)送請求就是跨域請求,本文主要給大家介紹了關于AJAX請求以及解決跨域問題的相關資料,需要的朋友可以參考下
2022-11-11
JavaScript建立一個語法高亮輸入框實現思路
通常網站自帶的textarea編輯器不能滿足我們的需求比如高亮顯示代碼等,在這篇文章中，我將使用JavaScript庫ACE來創(chuàng)建一個輸入框效果,該腳本允許開發(fā)人員創(chuàng)建支持語法高亮的輸入框,感興趣的你可不要錯過了哈
2013-02-02
uniapp中使用render.js進行openlayers、arcgis等地圖操作實戰(zhàn)指南
renderjs是一個運行在視圖層的js,它比WXS更加強大,它只支持app-vue和h5,下面這篇文章主要給大家介紹了關于uniapp中使用render.js進行openlayers、arcgis等地圖操作的相關資料,需要的朋友可以參考下
2024-01-01
JS中的==運算： [''''] == false —>true
這篇文章主要介紹了JS中的==運算： [''] == false —>true的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
實例詳解JSON取值(key是中文或者數字)方式
本文通過實例詳解JSON取值(key是中文或者數字)方式，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
2017-08-08
javascript 檢測瀏覽器類型和版本的代碼
如果對javascript了解不是特別深入的話,很容易就會寫出不兼容的代碼(就像我),這時候就得判斷瀏覽器了。比如事件偵聽、一些鼠標和鍵盤事件、Range等,一些都會不一樣.下面列出幾種常用的檢測瀏覽器方法，以饗觀眾!
2009-09-09