How to close a jquery UI dialog with iframe

Question

Here is how I initialize the dialog:

$('a.dialog').click(function(e) {
    e.preventDefault();
    var $this = $(this);
    $('<iframe id="externalSite" class="externalSite" src="/controller/action" frameBorder="0"></iframe>').dialog({
        modal: true,
        resizable: false,
        title: 'Title',
        zIndex: 1,
        show: 'fast',
        hide: 'slow',
        width: 600,
        height: 400,
        position: 'middle'
    }).width(600);
});

How can I close it from inside the iframe?

For example, I'd like to have a link inside the iframe that will close the dialog.

Answer 1

You can use window.parent or window.top to reference parent window. Starting from there, you should be able to find your dialog with jquery and close it. Something like

$(window.top.document).find('#externalSite').dialog('close');

https://developer.mozilla.org/en/DOM/window.parent