Display jquery dialog in parent window

Question

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');

Answer 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:

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

Answer 2

There is simple and graceful solution:

1. Include jquery and jqueryui into your parent window
2. 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();