jQuery dialog inside iFrame not running close function

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

Solution

Your code appears to work in an iFrame:

https://jsfiddle.net/Twisty/qhe0L1an/

JavaScript

$(function() {
  var $html = $("<html>");
  $("<head>").appendTo($html);
  $("<link>", {
    rel: "stylesheet",
    href: "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
  }).appendTo($("head", $html));
  $("<script>", {
    src: "https://code.jquery.com/jquery-1.12.4.js"
  }).appendTo($("head", $html));
  $("<script>", {
    src: "https://code.jquery.com/ui/1.12.1/jquery-ui.js"
  }).appendTo($("head", $html));
  $("<body>").appendTo($html);
  $("<div>", {
    id: 'popupDialog',
    title: "Test Dialog"
  }).html("<p>My Dialog</p>").appendTo($("body", $html));
  $("<button>", {
    id: "openDiag",
  }).html("Open").appendTo($("body", $html));
  $("<script>").text("console.log('Loading Script in iFrame'); $('#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() { console.log('ttt'); }, close: function() { console.log('rrr'); } }); $('#openDiag').click(function(){ $('#popupDialog').dialog('open'); })").appendTo($("body", $html));

  var $iframe = $("<iframe>").css({
    width: "100%",
    height: "380px"
  }).attr("srcdoc", $html.prop("outerHTML")).appendTo("body");
});

Most of the code is just building the HTML and iFrame structure. When you run JS/jQuery in a Frame, the library must be loaded with it. If it is loaded in the parent, the Frame will not have access to those libraries.