在父窗口中显示jquery对话框

Question

我有一个使用iframe的网站。 iframe本身就是网站的内容。现在在iframe中我想使用jQuery Dialog。但是，使用它时，叠加层和对话框仅显示在iframe内，而不是父窗体上。我的父html为对话框定义了以下html：

<div id="modalHolder"></div>

在我的iframe中，我使用以下javascript来创建对话框并显示它。

dlg1 = $(window.parent.document.getElementById("modalHolder"));
dlg1 = dlg1.dialog({
    width: 300,
    height: 150,
    modal: true,
    autoOpen: false,
    resizable: false,
    closeOnEscape: false,
    draggable: false,
    overlay: 
    {
        backgroundColor: 'red',
        opacity: 0.65
    },
    open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});

要显示我使用的对话框：

dlg1.dialog('open');

Answer 1

有简单而优雅的解决方案：

1. 在您的父窗口中包含jquery和jqueryui
2. 在此之后，您可以访问iframe中的父JQuery对象

例如：

var $jParent = window.parent.jQuery.noConflict();
var dlg1 = $jParent('#modalHolder');
dlg1.dialog();

Answer 2

因为对话框函数在iframe的上下文中运行，所以它总是会创建对话框div（如半透明背景div和对话框div）作为iframe的子元素。即使您从父文档中获取元素，实际脚本仍在iframe中运行。如果你有Firefox和Firebug，你应该能够使用HTML检查器来查看正在发生的事情。

我只能想到两个解决方案：

1. 使用jQuery对话库的修改版本。我根本不推荐这个
2. 移动您的JavaScript，使其在父文档的上下文中执行。