Question

我的app.i'm开发了一个带有cordova＆amp; amp;的应用程序。 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事件，通过单击背景使弹出窗口不可拒绝。嗯，它工作正常，但我有一个问题。在我的第一页中随机出现这种情况

First image

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

可能是什么问题？

提前致谢，对不起我的英语：）

Answer 1

正如您所提到的那样，归因于data-overlay-theme="a"。但实际上它应该工作得很好......认为这是由于$('.ui-popup-screen').off(); 你可以在这里观察 Prevent JQuery Mobile from closing a popup when user taps outside of it

如果你需要另一种黑色背景方式，你可以这样做..

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

Answer 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样式。

在我的索引中，作为身体的孩子，我添加了<div id="overlaypage"></div>和$("#overlaypage").addClass("overlaycont");，通过这种方式，弹出窗口可以通过在其外部突出而不可接受，并且正确显示背景。

这样的痛苦！

Jquery移动全球弹出背景

2 个答案: