Question

我有一个jQuery模式对话框，其中包含一个显示一些内容的iFrame。当用户在iFrame中选择一个选项时，我会进行一次Ajax调用，然后我想关闭我的对话框，但它并没有关闭我。

在我的父表单上，我有一个div标签：

div id="structureDialog" title="Add Structure"

当用户点击父级上的元素时，我打开对话框：

// bind an onclick event onto tiles to display the modal dialogue window
$(".stationTile").bind('click', function () {
    var src = "<iframe src="myurl" />";
    var locationID = 1;
    $("#structureDialog").attr("locationID", locationID);
    $("#structureDialog").html(src);  //iframe
    $("#structureDialog").dialog({
        modal: true,               
    });    
});

在我的iFrame中，我有以下内容：

$(".userOption").bind('click', function () {
    $.ajax({
        async: false,
        type: "POST",
        url: "/NewStructure.aspx/Build",   
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: buildSuccess
    });
});

function buildSuccess(res, dest) {
    $("body", window.parent.document).attr("style", "background-color:yellow;");
    $("#structureDialog", window.parent.document).attr("style", "background-color:red;");
    $("#structureDialog", window.parent.document).dialog('close');
}

在我的函数buildSuccess中，我能够成功将对话框更改为红色。但是，关闭功能不会关闭我的对话框。从我到目前为止看到的大多数例子来看，这段代码应该可以正常工作，所以我很难过。

Answer 1

正如我在上面的评论中所写，解决方案与运行jquery的实例有关。创建对话框对象时，它位于父窗体的jquery实例的上下文中。在iFrame中，创建了第二个jquery实例，因此对话框不在范围内。

调用$("#structureDialog", window.parent.document).dialog('close');使用jquery的本地实例搜索父项的DOM，因此，由于没有在那里初始化对话框，所以不能在那里关闭它。

解决方案是通过重新排列术语来引用父项的jquery实例，如下所示：

parent.$("#structureDialog").dialog('close');

首先将上下文指向父级，然后使用父级的jquery实例查找对话框并将其关闭。

感谢Chrismarx1在这篇文章中向我指出了这个解决方案： http://forum.jquery.com/topic/trigger-from-iframe-to-parent-window

Answer 2

尝试

$("#structureDialog", window.opener.document).dialog('close');

jQuery模式对话框拳击没有从iFrame关闭

2 个答案: