How do I check via jQuery if a jQuery Mobile popup is open?

Question

I'm able to activate the following jQuery Mobile popup:

<div data-role="popup" id="waiting1" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" data-dismissible="false">
     <div class="modalAlert" id="waitingContent">
      Waiting...
     </div> 
</div>

using the jQuery command:

$(waiting1).popup('open');

but then I want to confirm programmatically that the popup opened, and trigger an alert using an IF statement if it didn't. I tried using the CSS display attribute:

if ( $(waiting1).css('display') != 'block') {
    alert(
        "Error: Waiting popup should not be visible."
    );
    return( -1 );
};

...but as a jQuery Mobile popup, apparently the attribute is always "block" whether it's visible or not. What's the proper way to check this within the IF statement? Thanks for any help.

Answer 1

In jQuery Mobile, a class gets applied to the popup's container when it appears. ui-popup-active when it's visible, ui-popup-hidden when it's hidden. Therefore instead of checking for 'block' or ':visible', you could check for the that class:

if ( $(waiting1).parent().hasClass('ui-popup-hidden')) {
    alert(
        "Error: Waiting popup should not be visible."
    );
    return( -1 );
};

Answer 2

We can use the jQuery Mobile Popup mutex:

if ($.mobile.popup.active && $.mobile.popup.active.element[0] === $(waiting1)[0]) {
alert('popup is opened');
}

Answer 3

Suppose popup has the class popupLogin

if ($.mobile.activePage.find(".popupLogin").parent().hasClass("ui-popup-active")){
     alert('popup is open');
}

See this jsfiddle: http://jsfiddle.net/umerqureshi/fuy4Lz5z/

Answer 4

This worked for me:

if(!$.mobile.activePage.find(popupID).is(":visible")) $(popupID).popup('close');