Tôi có thể nhận được trạng thái hiện tại của một cửa sổ bật lên twitter bootstrap không?

Question

Tôi hiện đang gọi một tập lệnh để tự động thêm nội dung vào cửa sổ bật lên của mình nhưng tôi không cần thực hiện cuộc gọi này khi người dùng nhấp một lần nữa để đóng lại. Có thể để có được nhà nước và đóng nó khi nó có thể nhìn thấy?

Đây là những gì tôi có cho đến nay:

$('.knownissue').on('click', function() { 

    var info = $(this).attr('id').substr(5).split(':'); 
    var el = $(this); 

    // How do I check to see if the popover is visible 
    // so I can simply close it and exit? 

    $.post('functions/get_known_issues.php?tcid='+info[0]+'&tcdate=' + info[1], function(data) { 
     if (data.st) { 
      el.attr('data-content', data.issue); 
      el.popover('toggle'); 
     } 
    }, "json"); 

}); 

Answer 1

Bootstrap thêm và loại bỏ các đánh dấu cho các popover động, vì vậy bạn chỉ cần để kiểm tra sự tồn tại của nguyên tố này.

Nếu bạn đi đến dụ trang Bootstrap: http://twitter.github.com/bootstrap/javascript.html#popovers, bạn có thể chuyển đổi ví dụ popover của họ với các nút lớn màu đỏ hiển thị ở đó mà nói "Click để chuyển popover"

selector jquery này được viết để chọn yếu tố đó popover nếu nó tồn tại $ ('# popovers'). tìm ('h3') .q (5) .next(). tìm thấy ('. popover')

Để kiểm tra trạng thái của nó (tồn tại hay không), hãy kiểm tra nếu độ dài của tập hợp phần tử trả lại là 0.

Vì vậy, hãy nhấn nút để chuyển đổi ví dụ cửa sổ bật lên của chúng, sau đó chạy theo ing trong giao diện điều khiển:

Toggle POPOVER ON

console.log( 
    $('#popovers').find('h3').eq(5).next().find('.popover').length === 0 
); // false 

Toggle POPOVER OFF

console.log( 
    $('#popovers').find('h3').eq(5).next().find('.popover').length === 0 
); // true 

PS - Hy vọng rằng bạn sẽ viết một chọn tốt hơn kể từ khi bạn đã biết bạn sẽ cần phải kiểm tra cửa sổ bật lên tồn tại trên trang hoặc không

CHỈNH SỬA: link to jsfiddle HERE

Answer 2

if($('.popover').hasClass('in')){ 
    // popover is visable 
} else { 
    // popover is not visable 
} 

Answer 3

Để tránh tìm kiếm đánh dấu tự động chèn bạn có thể làm điều này:

Trong Bootstrap 2:

var $element = $('.element-you-added-popup-to') 
$element.data().popover.tip().hasClass('in') 
// Or if you used '.tooltip()' instead of '.popover()' 
$element.data().tooltip.tip().hasClass('in') 

Trong Bootstrap 3:

$element.data()['bs.popover'].tip().hasClass('in') 
$element.data()['bs.tooltip'].tip().hasClass('in') 

Answer 4

sự kiện ẩn và hiển thị có sẵn trong cửa sổ bật lên bootstrap như mặc định.

$('#myPopover').on('shown.bs.popover', function() { 
 
    // do something… 
 
})

Các sự kiện sau cho popover bootstrap có sẵn

show.bs.popover \t 
 
shown.bs.popover 
 
hide.bs.popover \t 
 
hidden.bs.popover

vui lòng tham khảo tài liệu bootstrap popovers để biết thêm chi tiết