1

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

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

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

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

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

我正在使用的代码是这样的：

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

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

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

预期的行为：

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

1 回答 1

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 } );
于 2021-10-15T10:18:44.277 回答