android - Jquery Mobile 全局弹出窗口背景

Question

我的应用程序出现问题。我正在使用 cordova 和 jquery mobile 开发应用程序。 按照 jquery mobile master 上的代码，我找到了该代码

function openPopup(idPopup, onTimeout) {
    var popupContent = '<div data-role="content" data-theme="a" style="border:0px;" class="ui-corner-bottom ui-content centerContent">' +
        '<h3 class="ui-title" id="myTitle">Caricamento</h3>' +
        '<img src="img/load_shop33sell.gif"/></div>';
    var popup = '<div data-role="popup" id="popup-' + idPopup + '" data-overlay-theme="b" data-theme="a" class="ui-content">' + popupContent + '</div>';
    $.mobile.activePage.append(popup).trigger("pagecreate");
    $("#popup-" + idPopup).on({
        popupbeforeposition: function () {
            $('.ui-popup-screen').off();
        }
    });
    var fallback = setTimeout(function () {
        $("#popup-" + idPopup).popup("open");
    }, 3000);
    $("#popup-" + idPopup).popup("open");
    clearTimeout(fallback);
    callback = setTimeout(function () {
        $("#popup-" + idPopup).popup('close');
        if (onTimeout && typeof (onTimeout) === "function") {
            onTimeout();
        }
    }, 20000);
}

使用这段代码，我可以打开一个弹出窗口而无需包含

<div data-role="popup">..../<div>

在我创建的每个页面中。我只是修改了一点，添加了 popupbeforeposition 事件，通过单击背景使弹出窗口不可关闭。 好吧，它工作正常，但我遇到了问题。在我的第一页中随机发生这种情况

弹出窗口似乎在到达正确位置之前就打开了。另外我还有一个可滚动的第二页，我总是遇到这种情况。如果我尝试向上滚动到页面顶部，我有一半的屏幕是黑色的，如第一张图片所示。

可能是什么问题？

提前致谢，对不起我的英语:)

Answer 1

如您所述，这是由于 data-overlay-theme="a" 造成的.但实际上它应该以良好的方式工作..认为这是由于$('.ui-popup-screen').off();造成的 你可以在这里观察 Prevent JQuery Mobile from closing a popup when user taps outside of it

如果你需要黑色背景的替代方法，你可以这样做..

添加 div <div id="overlaypage"></div>里面像这样<div data-role="page">

HTML:

<div data-role="page">
  <div id="overlaypage"></div>
  <div id="header"></div>
</div>

CSS:

.overlaycont {
    background:#000;
    bottom:0;
    left:0;
    position:fixed;
    right:0;
    top:0;
    z-index:100;
    opacity:.6
}

jQuery:

• 当您尝试单击以打开弹出式 addclass 时

  $("#overlaypage").addClass("overlaycont");
  

• 当您关闭弹出窗口时删除类

  $("#overlaypage").removeClass("overlaycont");
  

工作演示:http://jsfiddle.net/nPeaV/7421/