colorbox中的jquery-ui对话框导致最大调用堆栈大小超出错误

Question

我正在使用jquery-ui它,它的dialog功能是在我的网络应用程序中显示模态对话框.它工作正常.

在一个用例中,我colorbox在屏幕上有一个弹出窗口,一旦用户完成输入,我需要显示一个确认对话框.

此外,由于我尝试的所有主要浏览器上的错误处理,一切实际上都有效,但我担心javascript引擎和浏览器的某些组合可能会导致什么问题.

我得到的错误是调用堆栈大小溢出(Chrome将其显示为Uncaught RangeError: Maximum call stack size exceeded.).

模态对话框的代码是:

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

}

colorbox在javascript中调用,它div从实际页面嵌入,因为它是内容:

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

在弹出窗口中,我有一个按钮,只需打开确认对话框.

我提前道歉,因为这是我第一次使用JSFiddle,而且我无法让colorbox和对话框弹出窗口完全匹配它在我的页面上的样子(它实际上在彩盒顶部正确弹出而不是"在后台" ).我不确定这是不是因为我不得不使用不同版本的jquery和jquery-ui(我找不到我在下拉时使用的相同组合)或其他东西.

一个JSFiddle在这里.如果在按下"打开对话框"按钮后单击颜色框区域,则应该会出现相同的错误(firefox和Chrome似乎在显示错误时的反应略有不同).

谢谢你的任何建议!

Answer 1

似乎Dialog和Colorbox正在争夺焦点。将trapFocus设置设置为false将解决此问题。当然，根据您的使用方式，它可能会对您的页面产生一些副作用。有关详细信息，请查阅官方文档。

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