如何更新 jQuery Mobile 全局弹出窗口的位置？答案

【问题标题】：How do I update the position of a jQuery Mobile global popup?如何更新 jQuery Mobile 全局弹出窗口的位置？
【发布时间】：2013-12-11 09:33:07
【问题描述】：

我有一个 jQuery Mobile 全局弹出窗口，其内容是动态生成的。所以默认是空的。

我正在监听beforeposition 事件以捕获正在打开的弹出窗口。然后我加载一个配置文件/内容文件，生成内容并将其附加到弹出窗口。

但是，当我添加时，JQM 已经计算完弹出窗口的位置，所以它会在屏幕上错位。

这是我正在做的事情：

$(document).find("#global-popup")
    .on("popupbeforeposition", function (e) {
    factory.util.generatePopupContents(app.generateActionObject(e));
});


factory.util.generatePopupContents = function (obj) {
    var i, j, promises, fragment, popup, reference, state;

    popup = obj.gadget,
    reference = popup.getAttribute("data-reference"),
    state = popup.getAttribute("data-state");

    // don't reload if same popup is opened
    if (state !== reference) {
        if (reference === null) {
            util.errorHandler({
                "error": "Global Bindings: No handler for popup"
            });
        } else {
            popup.setAttribute("data-state", reference);
            popup.setAttribute("data-reference", reference);
            promises = [];

            // fetch content > THIS WILL LOAD A JSON DICT
            app.fetchConfiguration({
                "storage": app.default_dict.storage_dict.settings,
                    "file": app.default_dict.storage_dict.gadgets,
                    "attachment": reference,
                    "pass": undefined
            })
                .then(function (reply) {
                obj.gadget.setAttribute("data-reference", reference);
                // loop children in JSON dict
                if (reply.children) {
                    for (i = 0; i < reply.children.length; i += 1) {
                        promises[i] = app.setContent(reply.children[i], {}, false);
                    }
                }
                return RSVP.all(promises)
            })
                .then(function (content) {
                // create a fragment and append generated content
                fragment = document.createDocumentFragment();
                for (j = 0; j < content.length; j += 1) {
                    fragment.appendChild(content[j]);
                }

                // translate fragment if needed
                if (i18n) {
                    map.actions.translateNodeList(fragment);
                }

                // empty gadget and reload
                obj.gadget.innerHTML = "";
                obj.gadget.appendChild(fragment);
            })
                .fail(util.errorHandler);
        }
    }
};

我想知道添加内容后如何重新定位弹出窗口 ($(obj.gadget))。

我试过了：

 $(obj.gadget).trigger("updatelayout");

或者：

 $(obj.gadget).popup("reposition", {"y": 0});

但它们都不起作用。也不会在 document 上触发 updatelayout。

问题
如何更新全局弹出窗口的位置？

【问题讨论】：

您想在它拥有并可见后重新定位它？
会有帮助吗？ stackoverflow.com/a/19638417/1771795
嘿 Omar，我希望在显示之前正确定位它，但是在我的 getAttachment 处理程序中加载文件“需要很长时间”，所以 JQM 已经完成，而我还在等待对于我的 Ajax 响应。所以我需要重新定位可见的弹出窗口。
不，链接没有帮助。我尝试了x、y 和positionTo 的所有变体。如果我在 JQM 中登录，则会调用 reposition 方法，该方法调用内部的 _reposition 但在其中我的方法调用被吞没了。也许是一个错误......需要检查更多
这可能是一个错误，因为链接中的代码仅适用于 1.3.2 而不是更低版本。

标签： javascript jquery jquery-mobile popup position

【解决方案1】：

您需要将其绑定到popupafteropen。

$(".selector").on("popupafteropen", function () {
    $(this).popup("reposition", {
        "positionTo": "window",
        // or
        x: 100,
        y: 200
    });
});

Demo

【讨论】：