8

我正在使用 jQuery Mobile (1.3.1) 来显示一个弹出窗口（屏幕居中）。根据用户操作，一些内容会通过 AJAX 插入到弹出窗口中。这很好用，但是有一个问题：一旦内容被注入到弹出窗口中，它的大小就会改变，但位置不会更新。调整窗口大小后，弹出位置就会刷新，但到目前为止我还没有找到手动触发此操作的方法。

弹窗声明：

<div id="MoveFolderPopup" data-role="popup" data-position-to="window" style="min-width: 20em">

我已经尝试将弹出窗口重新定位到窗口中心的一些事情（包括快速查看一些内部未记录事件的弹出窗口小部件源代码）：

$('#MoveFolderPopup').trigger("reposition");
$('#MoveFolderPopup').trigger("_reposition");
$('#MoveFolderPopup').trigger("_handleWindowResize");
$('#MoveFolderPopup').trigger('refresh')
$(window).trigger('resize');
$('#MoveFolderPopup').popup('open');
$('#MoveFolderPopup').trigger('updatelayout');

我对 JavaScript 没有太多经验，只是对这个问题没有更多的想法；）有人可以帮助我吗？谢谢！

4

3 回答 3

18 
$("#MoveFolderPopup").popup("reposition", {positionTo: 'origin'});

或者

$("#MoveFolderPopup").popup("reposition", {positionTo: 'window'});

在这种情况下，两者都可以，因为data-position-to="window"

于 2013-06-18T19:23:27.597 回答
0

这部分适用于我：

$('#MoveFolderPopup').resize();

我确实发现立即触发它时效果不佳，所以我使用了setTimeout. 虽然它看起来不太漂亮，但我正在寻找更好的解决方案。

于 2013-06-18T17:56:00.303 回答
0

我遇到了类似的问题，而这里提供的解决方案都不适用于我的情况。解决我的问题（也许也是你的问题）的简单解决方案：

  1. 关闭弹出窗口
  2. 在弹出窗口中添加/替换内容
  3. 打开弹出窗口（如果关闭需要一段时间，可能会超时）

这进行得如此之快，以至于用户不会意识到弹出窗口已关闭并再次打开。弹出窗口大小是根据新内容而不是以前的内容设置的。

我也在带有 Chrome、Firefox、Safari 的移动设备上对此进行了测试。

如果您有/想要更改内容的全屏弹出窗口，您可以将此代码放在 .ready 部分中：

// Position fullscreen popup
$("#yourPopupBoxId").popup({
    beforeposition: function () {
        $(this).css({
            width: window.innerWidth,
            height: window.innerHeight,
            border: 'none',
            // Depending on content, otherwise ignore
            display: 'inline-table'
        });
    },
    x: 0,
    y: 0
});

使用提供的解决方案，您甚至不需要在可滚动内容的情况下以编程方式滚动到顶部。关闭和重新打开弹出窗口将始终向您显示（可滚动）内容的开始。

于 2019-09-14T20:03:52.003 回答