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

编程入门行业动态更新时间:2024-10-26 00:23:51

本文介绍了Jquery 移动弹出窗口在页面调整大小或滚动时在错误的位置重新打开的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

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

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

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

有人能给我一些建议吗?

解决方案

您需要监听 popupbeforeposition 事件并更改该事件省略的 ui 对象.该对象拥有三个定义弹出窗口位置的属性，ui.x、ui.y 和ui.positionTo.

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

以下代码应包含在 pageinit 事件 (2) 中.

$(document).on("pageinit", function () {$("#popup_ID").on("popupbeforeposition", function (e, ui) {ui.x = 值；/* (1) */ui.y = 值；ui.positionTo = null;/* 这个 */});});

<块引用>

演示

(1) 值 = 数

(2) pageinit 是一个特殊的 jQM 事件，它等效于 .ready() 并且应该使用它来代替它.

In PC browser there is a problem that popup changes its position on window resizing. I googled it and found that JMF has a bug changing positionTo from origin/#codeSource to window.

In mobile browser I have the same issue on page scrolling. Popup is rendered again in wrong position.

I need either to set somehow correct position or to avoid multitime reopening on window resizing and page scrolling.

Could somebody give me a piece of advice?

解决方案

You need to listen to popupbeforeposition event and alter ui object which that event omits. The object holds three properties which define popup's position, ui.x, ui.y and ui.positionTo.

The default value of the latter property is window, and it overrides any previously added values to ui.x and ui.y. Hence, whenever popupafterposition fires, ui.positionTo should be changed to null instead of window.

Edit: The below code should be wrapped in pageinit event (2).

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