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

Question

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

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

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

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

Answer 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() 并且应该用来代替它。