34

我有一个$('#anElement')附加了潜在弹出框的元素，例如

<div id="anElement" data-original-title="my title" data-trigger="manual" data-content="my content" rel="popover"></div>

我只是想知道如何检查弹出框是否可见：如何使用 jQuery 来完成？

4

9 回答 9

51

如果此功能未内置到您正在使用的框架中（它不再是twitter引导程序，只是bootstrap），那么您必须检查生成/修改的 HTML 以创建引导程序的此功能。

看看popupver 文档。那里有一个按钮，您可以使用它来查看它的运行情况。这是检查在幕后工作的 HTML 元素的好地方。

破解打开你的 chrome 开发者工具或 firebug（firefox 的），看看它发生了什么。看起来<div>按钮之后只是插入了一个 -

<div class="popover fade right in" style="... />

您所要做的就是检查该元素是否存在。根据您的标记是如何编写的，您可以使用这样的东西 -

if ($("#popoverTrigger").next('div.popover:visible').length){
  // popover is visible
}

#popoverTrigger是触发该弹出框首先出现的元素，正如我们在上面注意到的，引导程序只是将弹出框 div 附加在元素之后。

于 2012-11-18T17:55:06.500 回答
35

boostrap popover 插件中没有明确实现的方法，因此您需要找到解决方法。这是一个 hack，无论插件是否可见，它都会返回 true 或 false。

var isVisible = $('#anElement').data('bs.popover').tip().hasClass('in');
console.log(isVisible); // true or false

它访问实际上是一个对象的popover插件存储的数据，调用负责获取tip元素Popover的对象的方法，然后检查返回的元素是否具有class ，这表明popover附加到该元素可见。tip()in

您还应该检查是否附加了弹出框以确保您可以调用该tip()方法：

if ($('#anElement').data('bs.popover') instanceof Popover) {
  // do your popover visibility check here
}
于 2012-11-18T17:52:40.047 回答
6

在当前版本的 Bootstrap 中，您可以检查您的元素是否已aria-describedby设置。该属性的值是id实际弹出框的值。

因此，例如，如果您想更改可见弹出框的内容，您可以执行以下操作：

var popoverId = $('#myElement').attr('aria-describedby');
$('#myElement').next(popoverid, '.popover-content').html('my new content');
于 2015-04-28T15:36:40.007 回答
3

这会检查给定的 div 是否可见。

if ($('#div:visible').length > 0)

或者

if ($('#div').is(':visible'))
于 2012-11-18T17:50:03.370 回答
1

也许最可靠的选择是监听显示/隐藏的事件，如下所示。这将消除深入挖掘可能容易出错的 DOM 的必要性。

var isMyPopoverVisible = false;//assuming popovers are hidden by default  

$("#myPopoverElement").on('shown.bs.popover',function(){
isMyPopoverVisible = true;
});

$("#myPopoverElement").on('hidden.bs.popover',function(){
isMyPopoverVisible = false;
});

即使您以编程方式隐藏/显示/切换弹出框，这些事件似乎也会被触发，而无需用户交互。

PS用BS3测试。

于 2017-06-05T06:12:43.337 回答
0

这是一个简单的 jQuery 插件来管理它。我添加了一些注释选项来呈现访问对象的不同方法，并且没有注释我喜欢的选项。

对于当前的 Bootstrap 4.0.0，您可以捆绑Popover.js：https ://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js

// jQuery plugins
(function($)
{
    // Fired immiedately

    $.fn.isPopover = function (options)
    {
        // Is popover?
        // jQuery
        //var result = $(this).hasAttr("data-toggle");
        // Popover API
        var result = !!$(this).data('bs.popover');

        if (!options) return result;

        var $tip = this.popoverTip();

        if (result) switch (options)
        {
            case 'shown' :
                result = $tip.is(':visible');
                break;

            default:
                result = false;
        }

        return result;
    };    

    $.fn.popoverTip = function ()
    {
        // jQuery
        var tipId = '#' + this.attr('aria-describedby');
        return $(tipId);

        // Popover API by id
        //var tipId = this.data('bs.popover').tip.id;
        //return $(tipId);

        // Popover API by object
        //var tip = this.data('bs.popover').tip; // DOM element
        //return $(tip);
    };

    // Load indicator
    $.fn.loadIndicator = function (action)
    {
        var indicatorClass = 'loading';
        // Take parent if no container has been defined
        var $container = this.closest('.loading-container') || this.parent();

        switch (action)
        {
            case 'show' :
                $container.append($('<div>').addClass(indicatorClass));
                break;

            case 'hide' :
                $container.find('.' + indicatorClass).remove();
                break;
        }
    };
})(jQuery);

// Usage
// Assuming 'this' points to popover object (e.g. an anchor or a button)

// Check if popover tip is visible
var isVisible = $(this).isPopover('shown');

// Hide all popovers except this
if (!isVisible) $('[data-toggle="popover"]').not(this).popover('hide');

// Show load indicator inside tip on 'shown' event while loading an iframe content
$(this).on('shown.bs.popover', function ()
{
    $(this).popoverTip().find('iframe').loadIndicator('show');
});
于 2018-03-29T17:33:10.227 回答
0

这是一种使用 Vanilla JS 检查状态的方法。

document.getElementById("popover-dashboard").nextElementSibling.classList.contains('popover');
于 2019-06-07T08:27:55.033 回答
0

这适用于 BS4：

$(document).on('show.bs.tooltip','#anElement', function() {
    $('#anElement').data('isvisible', true);
});

$(document).on('hidden.bs.tooltip','#anElement', function() {
    $('#anElement').data('isvisible', false);
});


if ($('#anElement').data('isvisible'))
{
    // popover is visible
    $('#tipUTAbiertas').tooltip('hide');
    $('#tipUTAbiertas').tooltip('show');
}
于 2021-03-10T15:04:36.707 回答
-1

使用带有 boostrap 4 的弹出框，tip() 似乎不再是一个函数。这是检查弹出框是否启用的一种方法，基本上是它是否已被单击并处于活动状态：

if ($('#element').data('bs.popover')._activeTrigger.click == true){
...do something
}
于 2017-02-28T19:28:52.133 回答