如何通过jQuery检查jQuery Mobile弹出窗口是否已打开？

Question

我可以激活以下jQuery Mobile弹出窗口：

<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>

使用jQuery命令：

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

但是我想要在程序中确认弹出窗口已经打开，并且如果没有打开则触发一个警告，使用IF语句。我尝试使用CSS display属性：

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

...但是作为jQuery Mobile弹出窗口，该属性似乎始终为“block”，无论它是否可见。在IF语句中检查这个的正确方法是什么？感谢您的帮助。

- Pablo Carson

Answer 1

在jQuery Mobile中，当弹出窗口出现时，会向其容器应用一个类。当它可见时，应用ui-popup-active类，当它隐藏时应用ui-popup-hidden类。因此，您可以检查该类是否存在来代替检查'block'或':visible'。

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

- Akurn

---

那真是太快了！ 只是为了明确，ui-popup-hidden 的错误会警告弹出窗口应该可见。但这绝对是我要找的答案，我至少花了一个小时查找，它起作用了，非常感谢！ - Pablo Carson

似乎在iOS的Safari中无法工作，但在Chrome和Firefox中可以工作。 - Jonny

Answer 2

我们可以使用jQuery Mobile Popup互斥锁：

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

- Michael

---

已在iOS和Android上进行了测试：Safari，Chrome，Firefox -> 可以在任何地方运行 - Jonny

Answer 3

假设弹出窗口具有类名为 popupLogin。

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

请参见这个jsfiddle：http://jsfiddle.net/umerqureshi/fuy4Lz5z/

- Umer Qureshi

---

这个答案更好，但请注意，在执行任何弹出窗口转换（如淡入淡出、滑动等）之前，“ui-popup-active”不会出现！如果您在调用popup("open")后立即检查一个弹出窗口，则使用Michael方法仍然有效或者使用“none”转换。 - ob.yann

Answer 4

这对我有效：

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

- Asha Antony