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（我无法找到我在下拉时使用的相同组合）或其他东西。

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

感谢您的任何建议！

Answer 1

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

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

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

1 个答案: