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.

score 8 · Accepted Answer · answered Apr 08 '14 at 03:19

8

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

answered Apr 08 '14 at 03:19

Akurn

392
1
5

That was fast! Just to be clear, the error for `ui-popup-hidden` would warn that the popup SHOULD be visible. But this was the definitely the answer I was looking for, and I spent at least an hour looking, and it worked, so thanks very much! – Pablo Carson Apr 08 '14 at 04:37
Seems not to work in iOS' Safari but works in Chrome and Firefox. – Jonny Nov 07 '18 at 19:56

score 3 · Answer 2 · answered Feb 12 '16 at 22:59

3

We can use the jQuery Mobile Popup mutex:

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

answered Feb 12 '16 at 22:59

Michael

31
2

Tested in iOS and Android: Safari, Chrome, Firefox -> Works everywhere – Jonny Nov 07 '18 at 20:30

score 1 · Answer 3 · edited Feb 16 '19 at 04:30

1

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/

edited Feb 16 '19 at 04:30

robnick

1,720
17
27

answered Jul 08 '15 at 08:12

Umer Qureshi

1,736
2
20
22

this answer is better, but please note before any popup transition (like fade, slide..) was done, the 'ui-popup-active' will not appeared! if u check a poup right after popup("open"), in this case Michael method still work or use 'none' transition – ob.yann May 06 '16 at 10:00

score 0 · Answer 4 · answered Jan 22 '17 at 07:44

0

This worked for me:

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

answered Jan 22 '17 at 07:44

Asha Antony

441
5
8

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

4 Answers4

Linked