Display jquery dialog in parent window

问题

I have a website, that uses an iframe. The iframe itself is the content of the website. Now in the iframe I would like to use the jQuery Dialog. However when using it, the overlay and dialog is only displayed inside the iframe not on the parent. My parent html has the following html defined for the dialog:

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

In my iframe I am using the following javascript to create the dialog and to show it.

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(); }
});

To show the dialog I use this:

dlg1.dialog('open');

回答1:

Because the dialog function is running within the context of the iframe, it will always create the dialog divs (like the semi transparent background div and the dialog div) as children of the iframe's . Even though you're grabbing the element from the parent document, the actual script is still running in the iframe. If you have Firefox and Firebug, you should be able to use the HTML inspector to see what's going on.

I can only think of two solutions:

Use a modified version of the jQuery dialog library. I do not recommend this at all
Move your JavaScript so that it executes within the context of the parent document.

回答2:

There is simple and graceful solution:

Include jquery and jqueryui into your parent window
After this you can access to the parent JQuery object within iframe

For example:

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

来源：https://stackoverflow.com/questions/1958946/display-jquery-dialog-in-parent-window

标签

jquery-ui-dialog