提问人：Salman A 提问时间：10/12/2021 更新时间：5/9/2022 访问量：217
jQuery Mobile Popup 不断在滚动中重新定位自己
jQuery Mobile Popup keeps repositioning itself on scroll
问：
我想在jQuery移动网站上显示一个对话框，以便：
- 它在页面加载时显示
- 它显示了它后面的页面
- 它应该可以通过单击它外部来关闭
我决定使用jQuery移动弹出窗口，如下所示：
- 在页面内创建一个
<div data-role="popup"> - 以编程方式打开页面事件的弹出窗口
pageshow
它做得很好。但是，在移动设备上，当用户滚动页面时，弹出窗口会四处移动。滚动时，弹出窗口会消失几分之一秒，然后重新出现在不同的位置，可能试图留在视口内。这种行为是不可取的。
我使用的代码是这样的：
https://gist.github.com/salmanarshad2000/4b84e00f061508780e82e5a7b61d617b
要在移动浏览器中查看要点：
https://gitcdn.link/repo/salmanarshad2000/4b84e00f061508780e82e5a7b61d617b/raw/demo.html
预期行为：
- 弹出窗口在页面顶部打开，在顶部、左侧和右侧保持一些间隙
- 当用户滚动页面时，弹出窗口也会随之滚动
- 当用户停止滚动时，弹出窗口将保留在原处
答：
1赞
deblocker
10/15/2021
#1
首先，弹出窗口在调整大小和方向更改时重新定位自己，所以我相信在您的问题中提到的滚动过程中发生了一些事情，也许是由于移动设备的功能。
如果你不需要这些东西，你可以完全关闭弹出行为：
$(document).on("mobileinit", function () {
$.widget("mobile.popup", $.mobile.popup, {
_handleWindowResize: $.noop
});
});
请注意，这是一个快速而肮脏的解决方案。JQM 团队做得很好，花了很多时间测试许多不同的移动设备，所以我的解决方案不会涵盖所有情况 - 也许它只适用于您的要求。
顺便说一句：窗口中间的重新定位是一个众所周知的错误。要对此进行调整，您可能需要设置属性（或选项）并修补函数：data-position-topositionTo_resizeTimeout
//this.reposition( { positionTo: "window" } );
this.reposition( { positionTo: this.options.positionTo } );
评论
0赞
Salman A
10/15/2021
我试过了，但它没有用，可能是我做错了，也可能是坏了。我应该再试一次吗...like 可能是元素的位置，并以某种方式将其与顶部中心而不是中间对齐（文档说 jQM 会将其定位在引用元素的中间，这是荒谬的）。基本上，我希望弹出窗口随页面滚动，而不是停留在视口中间。data-position-tobody
0赞
deblocker
10/21/2021
@SalmanA：你解决了这个问题吗？
0赞
Salman A
10/21/2021
不，我已经放弃了。
0赞
Patrick V.
5/9/2022
#2
我远不是专家，但我试图通过注释隐藏弹出窗口中的一个条件来修补 jquery.mobile-1.4.5 的方法 _handleWindowResize（） .js。 直到现在似乎工作正常：
if ( ( /* this._expectResizeEvent() || */ this._orientationchangeInProgress ) &&
!this._ui.container.hasClass( "ui-popup-hidden" ) ) {
...
我不确定这不会在其他地方产生问题...... :(
评论