我可以获取 twitter 引导弹出框的当前状态吗？

Question

我目前调用一个脚本来动态地将内容添加到我的弹出框，但是当用户再次单击以关闭它时，我不需要进行此调用。是否可以获取状态并在可见时关闭它？

这是我目前所拥有的：

$('.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

为避免搜索动态插入的标记，您可以这样做：

在引导程序 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')

在引导程序 3 中：

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

Answer 2

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

Answer 3

默认情况下，隐藏和显示的事件在引导弹出窗口中可用。

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

以下用于引导弹出窗口的事件可用

show.bs.popover	
shown.bs.popover
hide.bs.popover	
hidden.bs.popover

更多详情请参考文档bootstrap popovers

Answer 4

对于 Bootstrap 4.x

 $('a#aUeberschriftenJBi').click(function() {
    if ($('a#aUeberschriftenJBi').attr('aria-describedby')) {
        // popover is visable
    } else {
        // popover is not visable
        $('a#aUeberschriftenJBi').popover({
            placement: 'bottom',
            title: function() {
                return "Title";
            },
            content: function() {
                return "Content";
            }
        });
    }

    $('a#aUeberschriftenJBi').popover("show");
});

HTML

<a href="#" id="aUeberschriftenJBi" title=""><span><i class="fa fa-sticky-note"></i></span></a>

Answer 5

Bootstrap 动态添加和删除弹出框的标记，因此您只需要检查元素是否存在。

如果您转到 Bootstrap 示例页面：http://twitter.github.com/bootstrap/javascript.html#popovers，您可以使用显示“单击以切换弹出窗口”的红色大按钮来切换他们的示例弹出窗口

这个 jquery 选择器被写来选择那个 popover 元素（如果它存在的话） $('#popovers').find('h3').eq(5).next().find('.popover')

要检查它的状态（存在与否），请检查返回的元素集的长度是否为0。

所以按下按钮来切换他们的弹出框示例，然后在控制台中运行以下命令：

打开弹出窗口

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

关闭弹出窗口

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

PS - 希望你能写出更好的选择器，因为你已经知道你需要检查页面上是否存在弹出框

编辑：link to jsfiddle HERE

Answer 6

试试这个

if ($('#elementId').attr('aria-describedby')) {
  alert('Popover is Visible');
  $("#elementId").popover('hide'); // To Hide Popover

}else{
  alert('Popover is Hidden');
  $("#elementId").popover('show'); // To Display Popover
}