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 );
};