Bootstrap - 自動關閉popover

2015-06-30 1:29 PM

本次要介紹的是 Bootstrap 中的 popover 元件的客製化功能

若要在 popover 失焦時 也就是 onblur 觸發時自動淡出該如何使用呢?

在 Bootstrap 本身並沒有支援這項功能

而且 DIV 本身也不支援 blur 事件

所以我們要使用另外一種方式達成相同的效果

程式碼範例

// Part 1: 初始化 popover 元件
var button = template.find(".itemInfo button");
// 加入 class name 以便下一步使用
button.addClass("popover-toggle");

var content = $("
test
");

button.popover({
    container:"body",
    content: content,
    html:true,
    placement:"top",
    title:"Popover title",
    trigger:'click'
});

// Part 2: 加入 click 事件處理
$(document).on("click", function(event){
    var target = $(event.target);
    $.each( $(".popover-toggle"), function(index, value){
        var _target = $(value);
        // 不是點擊按鈕或 popover 本身時關閉 popover 物件
        if( !target.is( _target ) && target.closest(".popover").length == 0 ){
            _target.popover("hide");
        }
    });
});

各項資料連結

Bootstrap