如果 jQuery Mobile 弹出窗口打开，如何通过 jQuery 检查？

Posted 2023-05-09

【中文标题】如果 jQuery Mobile 弹出窗口打开，如何通过 jQuery 检查？

【英文标题】：How do I check via jQuery if a jQuery Mobile popup is open?

【发布时间】：2014-05-20 13:08:12

【问题描述】：

我能够激活以下 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 显示属性：

if ( $(waiting1).css('display') != 'block') 
    警报（
        “错误：等待弹出窗口不应该是可见的。”
    );
    返回（-1）；
;

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

【参考方案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 );
;

【讨论】：

太快了！为了清楚起见，ui-popup-hidden 的错误会警告弹出窗口应该可见。但这绝对是我正在寻找的答案，我花了至少一个小时寻找，它奏效了，非常感谢！

似乎不适用于 ios 的 Safari，但适用于 Chrome 和 Firefox。

【参考方案2】：

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

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

【讨论】：

在 iOS 和 android 中测试：Safari、Chrome、Firefox -> 无处不在

【参考方案3】：

假设弹出窗口有类 popupLogin

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

看到这个jsfiddle：http://jsfiddle.net/umerqureshi/fuy4Lz5z/

【讨论】：

这个答案更好，但请注意在完成任何弹出过渡（如淡入淡出，幻灯片..）之前，'ui-popup-active'不会出现！如果您在弹出（“打开”）之后立即检查弹出窗口，在这种情况下迈克尔方法仍然有效或使用“无”转换

【参考方案4】：

这对我有用：

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