Как проверить, видимо ли всплывающее всплывающее окно twitter?

Ответ 1

Если эта функциональность не встроена в фреймворк, который вы используете (он больше не загружается в twitter, просто bootstrap), вам нужно будет проверить HTML, который сгенерирован/изменен для создания этой функции бутстрапа.

Взгляните на документацию popupver. Там есть кнопка, которую вы можете использовать, чтобы увидеть ее в действии. Это отличное место для проверки элементов HTML, которые работают за сценой.

Crack откройте свои инструменты для разработчиков Chrome или firebug (firefox) и посмотрите, что это происходит. Похоже, что после нажатия кнопки <div> вставлен только <div> -

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

Все, что вам нужно сделать, это проверить наличие этого элемента. В зависимости от того, как написана ваша разметка, вы можете использовать что-то вроде этого -

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

#popoverTrigger - это элемент, который вызвал появление popover в первую очередь и, как мы заметили выше, bootstrap просто добавляет popover div после элемента.

Ответ 2

Нет никакого метода, реализованного явно в плагине boostrap popover, поэтому вам нужно найти способ обойти это. Здесь взломан, который вернет true или false, может видеть, что плагин виден или нет.

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

Он обращается к данным, хранящимся в плагине popover, который фактически является объектом Popover, вызывает метод tip() объекта, который отвечает за выборку элемента tip, а затем проверяет, имеет ли возвращенный элемент класс in, что свидетельствует о том, что popover, прикрепленный к этому элементу, виден.

Вы также должны проверить, есть ли добавка, чтобы вы могли вызвать метод tip():

if ($('#anElement').data('bs.popover') instanceof Popover) {
  // do your popover visibility check here
}

Ответ 3

Это проверяет, отображается ли данный div.

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

или

if ($('#div').is(':visible'))

Ответ 4

В текущей версии Bootstrap вы можете проверить, установлен ли ваш элемент aria-describedby. Значением атрибута является id фактического popover.

Так, например, если вы хотите изменить содержимое видимого popover, вы можете сделать:

var popoverId = $('#myElement').attr('aria-describedby');
$('#myElement').next(popoverid, '.popover-content').html('my new content');

Ответ 5

Возможно, самым надежным вариантом будет прослушивание показанных/скрытых событий, как показано ниже. Это исключило бы необходимость углубления в 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;
});

Эти события, похоже, срабатывают, даже если вы скрываете/показываете/переключаете popover программно, без взаимодействия с пользователем.

Р. S. тестировали с BS3.

Ответ 6

Вот простой плагин 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');
});

Ответ 7

Вот способ проверить состояние с помощью Vanilla JS.

document.getElementById("popover-dashboard").nextElementSibling.classList.contains('popover');

Ответ 8

Используя popover с boostrap 4, tip() больше не работает. Это один из способов проверить, включено ли popover, в основном, если оно было нажато и активно:

if ($('#element').data('bs.popover')._activeTrigger.click == true){
...do something
}