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

Question

我正在使用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没有太多经验，对于这个问题已经想不出更多的想法了 ;) 请问有人能帮我吗？谢谢！

- orbitluke

Answer 1

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

或者

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

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

- adin

---

谢谢，第二个语句完成了任务 :) - orbitluke

Answer 2

这对我部分有效：

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

我发现如果立即触发它，它不会很好地工作，所以我使用了setTimeout。虽然它看起来不太美观，但我正在寻找更好的解决方案。

- Amir Ozer

Answer 3

我曾经遇到过类似的问题，但这里提供的解决方案都无法解决我的问题。最终解决我的问题（也可能解决你的问题）的简单方法是：

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
});

通过提供的解决方案，即使在可滚动内容的情况下，您也不需要编程滚动到顶部。关闭并重新打开弹出窗口将始终显示（可滚动）内容的开头。

- Jonny