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.