嵌入iframe的jQuery UI Dialog无法触发close函数问题求助

大家好，我遇到了一个挺头疼的问题，想请各位帮忙分析排查下：

我做了一个简单的jQuery UI Dialog组件，单独打开页面的时候所有功能都正常，但把这个页面嵌入到iframe里之后，close函数完全触发不了。

具体的异常表现：

• 单独访问页面时，Dialog的打开、关闭、动画效果全正常
• 嵌入iframe后，open函数能正常触发执行，但点击关闭按钮或者调用关闭方法时，hide动画完全不生效，Dialog一直停在页面上关不掉，close回调函数里的代码也完全没跑起来
• 页面里还用到了DataTables插件做表格排序功能，不知道会不会和这个插件有冲突？

我翻了各种相关问题，但没找到和我情况匹配的案例。目前使用的版本信息如下：

• jQuery UI: v1.12.1
• jQuery DataTables: v1.10.13
• jQuery: v1.12.4（团队暂时不想升级，临时换成v3.7.1测试，结果问题还是一模一样）
• 浏览器测试了Firefox、Firefox开发者版和Chrome的最新版本

我的Dialog初始化代码大概是这样的（太长只贴了核心部分）：

$('#popupDialog').dialog({
  open: function() {
    // 这段代码在iframe环境下能正常执行
    console.log('Dialog opened');
  },
  close: function() {
    // 这段代码在iframe里完全没反应，控制台也没输出
    console.log('Dialog closed');
    // 其他业务逻辑代码...
  },
  hide: 'fade' // 这个淡出动画在iframe里也不生效
});

有没有大佬遇到过类似的iframe和jQuery UI Dialog的冲突问题？或者DataTables会不会影响Dialog的事件绑定机制？求指点！

备注：内容来源于stack exchange，提问作者Viking NM