6

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

这是我到目前为止所拥有的：

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

});
4

6 回答 6

7

To avoid searching for dynamically inserted markup you can do this:

In 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')

In Bootstrap 3:

$element.data()['bs.popover'].tip().hasClass('in')
$element.data()['bs.tooltip'].tip().hasClass('in')
于 2014-02-14T17:00:54.947 回答
6 
if($('.popover').hasClass('in')){
  // popover is visable
} else {
  // popover is not visable
}
于 2012-11-03T02:47:09.743 回答
2

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

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

可以使用以下引导弹出框的事件

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

有关更多详细信息，请参阅 docs bootstrap popovers

于 2014-11-14T08:22:35.277 回答
1

对于引导程序 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>
于 2019-02-06T14:30:14.057 回答
0

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

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

编写此 jquery 选择器以选择该弹出框元素（如果它存在） $('#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 - 希望你能写出更好的选择器，因为你已经知道你需要检查页面上是否存在弹出框

编辑：链接到 jsfiddle 这里

于 2012-11-01T20:52:56.230 回答
0

尝试这个

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
}
于 2021-07-28T06:46:28.397 回答