jQuery Mobile 全球弹出背景

Posted 2023-05-09

【中文标题】jQuery Mobile 全球弹出背景

【英文标题】：Jquery Mobile Global Popup Background

【发布时间】：2013-09-29 17:21:05

【问题描述】：

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

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

可能是什么问题？

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

【问题讨论】：

.trigger("create"); 就够了，不用打电话.trigger("pagecreate");。这可能无法解决问题，但只是一个注释:)

这似乎部分解决了我的问题。现在＃1截图中的情况不再发生，但在＃2截图中仍然发生令人讨厌的想法。似乎背景只是在我正在查看的屏幕部分中还可以，如果我尝试向上或向下滚动屏幕的一半是黑色的......尝试锁定屏幕的滚动可能是一种解决方法解决这个问题？

还是有这个问题:(

打开弹窗时，尝试拨打$.mobile.activePage.trigger('updatelayout');。

问题似乎是由给予弹出窗口的data-overlay-theme="a" 属性引起的..如果我删除它，背景会以一种很好的方式显示..顺便说一句，我需要解决这个问题黑色背景..还有其他方法可以代替弹出窗口上的data-overlay-theme="a"？

【参考方案1】：

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

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

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

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/

【讨论】：

呃，唯一的问题是，如果尝试在不点击“关闭”按钮的情况下点击弹出窗口，弹出窗口将关闭并保持黑色背景，无法删除它..

根据你提到的帖子，我删除了//$("#popup-" + idPopup).on( popupbeforeposition: function () $('.ui-popup-screen').off(); );并在div上添加了data-dismissible="false"，它可以防止弹出窗口在外面被关闭，但效果是一样的..左边还是一个黑条

【参考方案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> 和 $("#overlaypage").addClass("overlaycont");， 这样，在弹出窗口外部单击是不可关闭的，并且背景显示正确。

好痛！