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

Question

我正在使用 JQuery Mobile 1.2.0 alpha 1。

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

（有关弹出窗口的文档可以在此处找到here）

编辑：

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

当JQM弹出窗口出现时，有一个覆盖整个屏幕的div，其类为ui-popup-screen。 我想办法给它一个很大的z-index，并解除它上面所有点击/轻击的功能。 这样做不能解决我的问题，但我想这是朝着正确方向迈进的一小步。

提前感谢。

- Erez Rabih

Answer 1

此已被添加为Github上的功能请求。请参见问题此处。 作为其中间解决方法的一个诡计是在ui-popup-screen上解绑事件。我会将以下代码放在pageinit中。

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

这是一个粗暴的临时解决办法，但它有效。

- TheGwa

---

你知道怎样才能使背景仍然启用吗？ :) 我不能将其消除，但也不能再与其他内容进行交互。 - MJB

@MJB 我不确定你想要实现什么。你能详细说明一下你还想与什么进行交互吗？ - TheGwa

我有一个地图在后台。我想要一个弹出窗口（侧边栏）出现，其中包含一些控件（按钮），用户点击按钮然后在地图上执行操作。 - MJB

你想在弹出窗口打开的同时使用地图吗？ - TheGwa

当弹出窗口具有data-history="false"属性时，这将无法工作 :( - Intrepidd

Answer 2

对于未来的搜索者，在1.3版本中，此功能现在得到了支持。只需将data-dismissible="false"属性添加到面板div即可。

- jeremytripp

---

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

Answer 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

- mklement0

Answer 4

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

- J.T. Houtenbos

Answer 5

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

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

- Rupali

---

我们要将它添加到哪里？你能举个例子吗？ - Llewellyn Collins