I have a simple jQuery UI Dialog. Everything is working as expected when viewing the page by itself except when that page is in an iframe. For some reason the close: function isn’t firing.

Everything is working when viewing the page by itself; the open: function triggers normally inside the iframe; however, the close: function will not fire.

The hide: doesn’t seem to be working either, dialog stays open and won’t close or run the close: function. again it’s only doing it when have to load that page in an iframe.

Is there anything about the dialog and iframes that would be causing this problem? They are also using the datatables plugin so they can sort the table and whatnot. Would this cause a problem?

Tried finding an answer but nothing was coming up like this

//jQuery UI: v1.12.1
//jQuery DataTables: v1.10.13
//jQuery: v1.12.4 (they're don't want to update, but temporary loaded v3.7.1 with same result)
//Firefox, Firefox developer, and Chrome lastest versions

$('#popupDialog').dialog({
    autoOpen: false,
    height: 'initial',
    width: 'initial',
    show: {
        effect: 'slide',
        duration: 500
    },
    hide: {
        effect: 'transfer',
        to: '#logo2',
        className: 'ui-effects-transfer',
        duration: 500
    },
    modal: true,
    open: function() {
        alert('ttt');
    },
    close: function() {
        alert('rrr');
    }
});