1

我的应用程序有问题。我正在使用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 事件以通过单击背景使弹出窗口不可关闭。好吧，它工作正常，但我遇到了问题。在我的第一页随机发生这种情况

第一张图片

似乎弹出窗口在获得正确位置之前打开。此外，我还有一个可滚动的第二页，而且我总是遇到这种情况。如果我尝试向上滚动到页面顶部，我有一半的屏幕是黑色的，如第一张图片所示。 在此处输入图像描述

可能是什么问题呢？

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

4

2 回答 2

3

正如你提到的，这是由于data-overlay-theme="a". 但实际上它应该以很好的方式工作..认为这是因为$('.ui-popup-screen').off(); 您可以在此处观察 防止 JQuery Mobile 在用户点击外部时关闭弹出窗口

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

<div id="overlaypage"></div>在里面添加这样的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：

  • 当您尝试单击以打开弹出添加类时

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

  • 当您关闭弹出删除类时

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

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

于 2013-10-01T03:11:52.727 回答
2

好的，我解决了结合两个答案的问题，这是我打开弹出窗口的功能

    function apriPopup(idPopup, onTimeout) {
            $(".ui-navbar").css('display','none');
            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" data-dismissible="false" id="popup-' + idPopup + '" data-theme="a" class="ui-content">' + popupContent + '</div>';
            $.mobile.activePage.append(popup).trigger("create");
            //$("#popup-" + idPopup).on({
            //    popupbeforeposition: function () {
            //   $('.ui-popup-screen').off();
            //    }
            //});
            var fallback = setTimeout(function () {
                $("#overlaypage").addClass("overlaycont");
                $("#popup-" + idPopup).popup("open");
            }, 3000);
            $("#overlaypage").addClass("overlaycont");
            $("#popup-" + idPopup).popup("open");
            clearTimeout(fallback);
            callback = setTimeout(function () {
            $(".ui-navbar").css('display','block');
                $("#overlaypage").removeClass("overlaycont");
                $("#popup-" + idPopup).popup('close');
                if (onTimeout && typeof (onTimeout) === "function") {
                    onTimeout();
                }
            }, 20000);
        }

正如你所看到的，我已经评论了$('.ui-popup-screen').off();，添加了一个data-dismissable="false" ，并且我使用了 dileep 建议的 overlaycont css 样式。

在我的索引中，作为 body 的子项，我添加了一个<div id="overlaypage"></div>and $("#overlaypage").addClass("overlaycont");，通过这种方式，弹出窗口通过在它外部单击是不可关闭的，并且背景显示正确。

好痛！

于 2013-10-01T13:29:09.070 回答