Search

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

No comments:

Post a Comment