Jquery 移动弹出窗口在页面调整大小或滚动时的错误位置重新打开

Posted 2023-05-09

【中文标题】Jquery 移动弹出窗口在页面调整大小或滚动时的错误位置重新打开

【英文标题】：Jquery mobile popup is being reopened in wrong position on page resizing or scrolling

【发布时间】：2014-03-11 00:34:22

【问题描述】：

在 PC 浏览器中存在弹出窗口在调整窗口大小时改变其位置的问题。我用谷歌搜索了一下，发现 JMF 有一个错误，将 positionTo 从 origin/#codeSource 更改为 window。

在移动浏览器中，我在页面滚动时遇到了同样的问题。弹出窗口再次呈现在错误的位置。

我需要以某种方式设置正确的位置，或者避免在调整窗口大小和页面滚动时多次重新打开。

有人可以给我一个建议吗？

【问题讨论】：

您使用的是哪个 jQM 版本？

您想在 window 打开时重新定位它吗？

@Omar，不，我想把它放在上面，对，但是当我这样做时，它会起作用，但是它会在页面滚动时跳到中心

【参考方案1】：

您需要监听popupbeforeposition 事件并更改该事件忽略的ui 对象。该对象包含三个属性，它们定义了弹出窗口的位置，ui.x、ui.y 和ui.positionTo。

后一个属性的默认值为window，它会覆盖之前添加到ui.x和ui.y的任何值。因此，每当popupafterposition 触发时，ui.positionTo 应更改为null 而不是window。

编辑：下面的代码应该被包裹在pageinit事件⁽²⁾中。

$(document).on("pageinit", function () 
  $("#popup_ID").on("popupbeforeposition", function (e, ui) 
      ui.x = value; /* (1) */
      ui.y = value; 
      ui.positionTo = null; /* this */
  );
);

Demo

⁽¹⁾ 值 = 数字

⁽²⁾pageinit 是一个特殊的 jQM 事件，它等价于 .ready()，应该使用它来代替它。

【讨论】：

谢谢，我看到它在 jsfiddle 中有效，但是我在 popupbeforeposition 上的函数只被调用了一次。找个理由……

@Tetyana 你能用你的代码更新你的问题吗？

我已经修复了我的代码，它现在可以工作了。非常感谢！问题解决了:)