你如何在父/打开器窗口中打开一个 jquery ui 对话框窗口？答案

【问题标题】：how do you open a jquery ui dialog window in parent/opener window?你如何在父/打开器窗口中打开一个 jquery ui 对话框窗口？
【发布时间】：2016-02-29 22:05:32
【问题描述】：

我正在尝试让一个 jquery ui 对话框从子窗口在父窗口中打开。换句话说，由于孩子只能在其窗口的约束中弹出对话框，我希望能够在父窗口的约束中使用对话框弹出的内容。

我试图使用 window.opener 来绑定链接，但运气不佳。

下面是从 Backbone View HTML 页面打开窗口的代码：

popoutWindow = window.open("campaign/genericPopout.aspx", "search", "width=800, height=600, toolbar=0, status=0, menubar=0, scrollbars=1, resizable=1", true);

在 genericPopout.apsx 调用一个文件，该文件使用 Backbone View 构建，使用此命令，

new popupSearchView();

它调用以下主干视图：

var popupSearchView = Backbone.View.extend({
    events: {
        "click #closeBtn" : "closePopupSerachView"
    },

    initialize: function() {
        this.template = _.template("<div id='searchPopupView'>" +
                                       "<div style='width: 100%; text-align: center;'>Hello World</div>" +
                                       "<div style='text-align: center;'><input type='button' id='closeBtn' value='Close' /></div>" +
                                   "</div>"
                                  );
        this.render();
    },

    render: function () {
        formString = this.template();
        $(formString).dialog({
            autoOpen: true,
            height:460,
            width: 350,
            title: "Search",
            modal: false
        })

        return this;
    },

    closePopupSearchView: function () {
        $(this).dialog("close");
    }
});

它会在新打开的窗口中正常打开弹出对话框，但它似乎不起作用。在父窗口 HTML 中，我有一个专门用于此对话框的 div：

<div id="popupSearchViewDiv"></div>

我尝试通过以下方式将 Backbone el 设置为此 div：

el: $("popupSearchViewDiv", window.opener.document)

但这似乎不起作用。关于如何实现这一点的任何想法？

谢谢

【问题讨论】：

标签： jquery-ui backbone.js popup underscore.js jquery-ui-dialog

【解决方案1】：

我想出了一个方法来做到这一点。我不确定它的效率如何，但这可能是唯一的方法。

在打开器窗口中，我放置了代码 jquery-ui 对话框：

function openSearchViewPopup() {
    $("#popupSearchViewDiv").dialog({
        autoOpen: true,
        height:460,
        width: 350,
        title: "Search",
        modal: false
}

在 index.aspx 中带有预定义的 DIV：

 <div id="popupSearchViewDiv"></div>

从包含上述函数代码的 index.aspx 打开的窗口中，我这样调用函数：

render: function () {
    var htmlToWrite = this.template();
    $(window.opener.docuemnt.getElementById("popupSearchViewDiv").append(htmlToWrite);

    $window.opener.openSearchViewPopup();
}

这似乎允许 jquery-ui 对话框弹出窗口在 window.opener 窗口中打开并在那里使用。

【讨论】：