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

问题

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.

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

回答2:

We can use the jQuery Mobile Popup mutex:

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

回答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/

回答4:

This worked for me:

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

来源：https://stackoverflow.com/questions/22926840/how-do-i-check-via-jquery-if-a-jquery-mobile-popup-is-open

标签

jquery

jquery-mobile

popup