colorbox中的jquery-ui对话框导致最大调用堆栈大小超出错误 [英] jquery-ui dialog in colorbox results to Maximum call stack size exceeded error

问题描述

我正在使用 jquery-ui 和对话框在我的网络应用中显示模态对话框的功能。它工作正常。

I am using jquery-ui and it's dialog functionality to display modal dialogs in my web app. It works ok.

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

At one use case, I have a colorbox popup window on a screen, and once user finishes his input I need to display a confirmation dialog.

此外，由于我尝试的所有主要浏览器上的错误处理，所有内容实际上都有效，但我担心可能出现什么问题javascript引擎和浏览器的组合可能导致。

Also here everything actually works thanks to error handling on all the major browsers I tried, but I worry what problems might some combination of javascript engine&browser could cause.

我得到的错误是调用堆栈大小溢出（Chrome将其显示为未捕获RangeError：最大调用堆栈超出大小。）。

The error I get is call stack size overflow (Chrome shows it as 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
});

}

彩色盒被调用javascript，它从实际页面中获取嵌入的 div 作为内容：

The colorbox is called in javascript, and it takes embedded div from the actual page as it's content:

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

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

In the popup, I have a button which just opens up the confirmation dialog.

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

I apologize in advance as it's my first time using JSFiddle, and I wasn't able to get colorbox and dialog popup match exactly how it looks on my page (it actually pops up properly on top of the colorbox and not "in the background"). I'm not sure if this is because I had to use different versions of jquery and jquery-ui (I couldn't find same combination I am using from the pulldown) or something else.

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

A JSFiddle is here. If you click around the colorbox area once the "open dialog" button has been pressed you should get same error (firefox and Chrome seem to react slightly differently when to show the error).

感谢您的任何建议！

推荐答案

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

It seems like the Dialog and Colorbox are fighting for the focus. Setting the trapFocus setting to false will resolve this issue. Of course it might have some side effects for your page depending on how you use it. Please consult the official documentation for details.

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

这篇关于colorbox中的jquery-ui对话框导致最大调用堆栈大小超出错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！