Javascript 颜色框中的jquery ui对话框结果超出最大调用堆栈大小错误

我正在使用

jqueryui

和

dialog

功能在我的web应用程序中显示模式对话框。它工作正常

在一个用例中，我在屏幕上有一个

colorbox

弹出窗口，一旦用户完成输入，我需要显示一个确认对话框

在这里，由于在我尝试的所有主要浏览器上都进行了错误处理，所以一切都能正常工作，但我担心javascript引擎和浏览器的某些组合可能会导致什么问题

我得到的错误是调用堆栈大小溢出（Chrome将其显示为

uncaughtrangeError:超出了最大调用堆栈大小。

）

模式对话框的代码为：

function modalDialog(dialogText, dialogTitle, okFunc, okLabel, cancelFunc, cancelLabel) {

var dialogButtons = {};

dialogButtons[okLabel] = function() {
  if (typeof(okFunc) == 'function') {
    setTimeout(okFunc, 50);
  }
  $(this).dialog('destroy');
};
dialogButtons[cancelLabel] = function() {
  if (typeof(cancelFunc) == 'function') {
    setTimeout(cancelFunc, 50);
  }
  $(this).dialog('destroy');
};

$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
  draggable: true,
  modal: true,
  resizable: false,
  width: 'auto',
  title: dialogTitle || 'Confirm',
  minHeight: 75,
  buttons: dialogButtons
});

在弹出窗口中，我有一个按钮，可以打开确认对话框

我提前表示歉意，因为这是我第一次使用JSFIDLE，而且我无法使colorbox和对话框弹出窗口与我的页面上的外观完全匹配（它实际上正确地弹出在colorbox顶部，而不是“在后台”）。我不确定这是否是因为我必须使用不同版本的jquery和jQueryUI（我在下拉列表中找不到相同的组合）或其他什么

A。如果在按下“打开对话框”按钮后单击颜色框区域，则会出现相同的错误（firefox和Chrome在显示错误时的反应似乎略有不同）

---

谢谢你的建议

对话框和颜色框似乎在争夺焦点。将trapFocus设置设置设置为false将解决此问题。当然，它可能会对你的页面产生一些副作用，这取决于你如何使用它。有关详细信息，请查阅官方文件

$(function() {
  $(".colorbox-load").colorbox({
  inline: true,
  overlayClose: false,
  href: "#popupContents",
  height: "320",
  width: "300",
  trapFocus: false
  });
})

$(function() {
  $(".colorbox-load").colorbox({
  inline: true,
  overlayClose: false,
  href: "#popupContents",
  height: "320",
  width: "300",
  trapFocus: false
  });
})