当用户在弹出窗口之外点击时，防止 JQuery Mobile 关闭弹出窗口

Posted 2023-05-09

【中文标题】当用户在弹出窗口之外点击时，防止 JQuery Mobile 关闭弹出窗口

【英文标题】：Prevent JQuery Mobile from closing a popup when user taps outside of it

【发布时间】：2012-08-28 02:12:11

【问题描述】：

我正在使用 JQuery Mobile 1.2.0 alpha 1。

目前，当我打开一个弹出窗口并在屏幕外的任意位置点击它时，弹出窗口正在关闭。 我想知道是否有任何我错过的 JQuery Mobile 属性可以设置并防止在外部点击时关闭弹出窗口？ （模态弹出窗口）

（弹出窗口的文档可以找到here）

编辑：

我有解决这个问题的想法，但仍然无法实现它：

当 JQM 弹出窗口出现时，会有一个 div 覆盖整个屏幕，类为 ui-popup-screen。我想以某种方式给它一个大的 z-index 并从中取消绑定所有单击/点击功能。这样做并不能解决我的问题，但我想这是朝着这个方向迈出的一小步。

提前谢谢。

【参考方案1】：

这已作为功能请求添加到 Github。请参阅问题here。

临时解决此问题的方法是取消绑定 ui-popup-screen 上的事件。我会将以下代码放在 pageinit 中。

$("#yourPopupId").on(
    popupbeforeposition: function () 
        $('.ui-popup-screen').off();
    
);

这是一个繁重的快速修复，但它确实有效。

【讨论】：

你知道我怎样才能让背景仍然启用吗？ :) 我不能解雇它，但我也不能再与其他人互动了。

@MJB 我不确定您要达到的目标。您能否详细说明您仍想与之互动的对象？

我在后台有一张地图。我希望弹出窗口（侧边栏）显示一些控件（按钮）和用户在单击按钮然后在地图上发出的操作。

您希望能够在弹出窗口打开时使用地图？

当弹出窗口有 data-history="false" 属性时这不起作用:(

【参考方案2】：

对于未来的搜索者，从 1.3 开始，现在支持此功能。只需将data-dismissible="false" 属性添加到面板 div。

【讨论】：

我有 1.7.13，但是将该属性添加到我的 div 中没有任何作用。想知道我做错了什么吗？

【参考方案3】：

在@TheGwa 的优秀解决方案的基础上，这里有一个概括，为即将推出的官方功能（大概在 1.3 版中）做准备：

将data-dismissible='false' 添加到您不希望通过在它们外部点击而将其关闭的所有弹出窗口的标记中。

将以下事件处理程序添加到您的应用程序；它将处理所有弹出窗口：

_

$(window).on('popupbeforeposition', 'div:jqmData(role="popup")', function() 
        var notDismissible = $(this).jqmData('dismissible') === false;
        if (notDismissible) 
          $('.ui-popup-screen').off();
        
);

-

一旦正式支持该功能，只需删除事件处理程序即可。

请注意，遗憾的是，官方文档（从 1.2 开始）表明该功能已经可用，但它不是 - 请参阅 http://jquerymobile.com/test/docs/pages/popup/options.html

【参考方案4】：

按以下方式添加data-dismissible="false"。

<div data-role="popup" id="popupnotification" data-overlay-theme="b" data-theme="c"  data-position-to="window" style="max-width:600px;">

【讨论】：

我们将它添加到什么。你能举个例子吗

【参考方案5】：

@ MJB -> 如果您希望在弹出窗口处于活动状态时能够单击任意位置（例如按钮），您可以按如下方式更改弹出窗口的 CSS：

.ui-popup-screen
                    position: relative;
                

这对我有用。

注意：当您执行此操作时，弹出窗口不再关闭 - 我做了一个解决方法：

$(window).click(function()     
    if ($( "#myPopup-popup" ).hasClass("ui-popup-active"))
        $( "#myPopup" ).popup( "close" );
    
);

myPopup-popup ID 由 JQM 生成 - myPopup 是我为弹出窗口提供的 ID。