jquery-ui-dialog - 在父窗口中显示 jquery 对话框

Question

我有一个使用 iframe 的网站。 iframe 本身就是网站的内容。现在在 iframe 中，我想使用 jQuery 对话框。但是，在使用它时，叠加层和对话框仅显示在 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

有一个简单而优雅的解决方案:

将 jquery 和 jqueryui 包含到您的父窗口中

在此之后，您可以访问 iframe 中的父 JQuery 对象

例如:

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