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经验，只是对这个问题没有任何想法;）有人可以帮帮我吗？谢谢！

Answer 1

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

或

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

在这种情况下要么做，因为data-position-to="window"

Answer 2

这部分适用于我：

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

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

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

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

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

3 个答案: