BootStrap如何實現自定義popover,點擊區域隱藏功能

這篇文章給大家分享的是有關BootStrap如何實現自定義popover,點擊區域隱藏功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

代碼如下

之前的按鈕必須定義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');     // 然后只把自己打開。
    });
  });

感謝各位的閱讀！關于“BootStrap如何實現自定義popover,點擊區域隱藏功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！