内容更改后重新定位 jQuery Mobile 弹出窗口答案

【问题标题】：Reposition jQuery Mobile popup after content change内容更改后重新定位 jQuery Mobile 弹出窗口
【发布时间】：2013-06-13 06:41:38
【问题描述】：

我正在使用 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 没有太多经验，只是对这个问题没有更多的想法；）有人可以帮助我吗？谢谢！

【问题讨论】：

标签： jquery mobile resize popup positioning

【解决方案1】：

这部分对我有用：

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

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

【讨论】：

【解决方案2】：

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

或

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

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

【讨论】：

谢谢，第二个语句完成了工作:)

【解决方案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
});

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

【讨论】：