17

我正在使用 JQuery Mobile 1.2.0 alpha 1。

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

（弹出窗口的文档可以在这里找到）

编辑：

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

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

提前谢谢。

4

5 回答 5

25

这已作为 Github 上的功能请求添加。请参阅此处的问题。

在此期间，一个 hack 是取消绑定 ui-popup-screen 上的事件。我会将以下代码放在 pageinit.xml 中。

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

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

于 2012-09-14T13:42:23.627 回答
19

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

于 2013-09-24T16:01:11.657 回答
4

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

于 2013-01-19T02:33:36.893 回答
0

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

<div data-role="popup" id="popupnotification" data-overlay-theme="b" data-theme="c"  data-position-to="window" style="max-width:600px;">
于 2014-09-12T10:58:26.567 回答
0

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

于 2014-10-16T14:18:52.510 回答