jQuery 移动弹出窗口在滚动时不断重新定位

Question

我想在 jQuery 移动网站上显示一个对话框，这样：

• 它在页面加载时显示
• 它显示了它后面的页面
• 它应该通过在它外面单击来关闭

我决定使用jQuery 移动弹出窗口，如下所示：

• 在页面内创建一个<div data-role="popup">
• 以编程方式打开页面的pageshow事件的弹出窗口

它做得很好。 但是，在移动设备上，当用户滚动页面时，弹出窗口会四处移动。 滚动时，弹出窗口会消失几分之一秒，然后重新出现在不同的 position，可能试图留在视口内。 这种行为是不可取的。

我使用的代码是这样的：

https://gist.github.com/salmanarshad2000/4b84e00f061508780e82e5a7b61d617b

要在移动浏览器中查看要点：

https://gitcdn.link/repo/salmanarshad2000/4b84e00f061508780e82e5a7b61d617b/raw/demo.html

预期行为：

• 弹出窗口在页面顶部打开，在顶部、左侧和右侧保持一些间隙
• 当用户滚动页面时，弹出窗口随之滚动
• 当用户停止滚动时，弹出窗口保持在原来的位置

Answer 1

首先，弹出窗口在调整大小和方向改变时重新定位自己，所以我相信在你的问题中提到的滚动过程中发生了一些事情，可能是由于移动设备的功能。

如果您不需要全部内容，您可以完全关闭弹出行为：

$(document).on("mobileinit", function () {
    $.widget("mobile.popup", $.mobile.popup, {
        _handleWindowResize: $.noop
    });
});

请注意，这是一个快速而肮脏的解决方案。 JQM 团队做得很好，花了很多时间来测试许多不同的移动设备，所以我的解决方案不会涵盖所有情况 - 也许它只适合您的要求。

---

旁注：窗口中间的重新定位是一个众所周知的错误。 要对此进行调整，您可能需要设置data-position-to属性（或positionTo选项）并修补_resizeTimeout函数：

//this.reposition( { positionTo: "window" } );    
this.reposition( { positionTo: this.options.positionTo } );

Answer 2

我远不是专家，但我试图通过评论隐藏弹出窗口的条件中的一个条件来修补 jquery.mobile-1.4.5.js 的方法 _handleWindowResize()。 到目前为止它似乎工作正常：

if ( ( /* this._expectResizeEvent() || */ this._orientationchangeInProgress ) &&
                !this._ui.container.hasClass( "ui-popup-hidden" ) ) {
...

我不确定这不会在其他地方产生问题...... :(