如何在父/开启窗口中打开jquery ui对话框窗口?

时间:2016-02-25 17:30:47

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

我正在尝试从子窗口的父窗口中打开一个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();

它调用以下Backbone View:

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)

然而这似乎不起作用。有关如何实现这一目标的任何想法?

谢谢

1 个答案:

答案 0 :(得分:0)

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

在开启窗口中,我放置了代码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窗口中打开并在那里使用。