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

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