Bootstrap 从 jQuery UI 调用的模态对话框：超出最大调用堆栈大小

Question

我遇到了一个奇怪的问题。我正在调用一个 Bootstrap 模式，同时有一个 jQuery UI 对话框打开并且在控制台中得到 RangeError: Maximum call stack size exceeded.

奇怪的是，只有当我在对话框打开时调用模式时才会发生这种情况。它似乎没有任何明显的副作用，但我宁愿错误不存在。

当我点击 Bootstrap 模式中的任一按钮时，我也会遇到同样的错误。

我正在使用 Bootstrap 版本 4.1.0，jQuery 版本 3.3.1 和 jQuery UI 版本 1.12.1

由于应用程序的构建方式，我需要对话框是模态的，但是当在所述对话框中执行特定操作时，Bootstrap 模态会在其顶部弹出。在显示 Bootstrap 模态之前更改对话框的模态状态似乎也无法解决问题。

虽然我觉得这可能与将两者都设置为模态有关，但我在这里遗漏了什么明显的东西吗？

整个项目复杂而庞大，所以我在下面放了几个片段：

//jQuery UI Dialog definition:

Dialog = $("#dialogContainer").dialog({
  autoOpen: false,
  height: 400,
  width: "80%",
  modal: true,
  show: {
    effect: "fade",
    duration: 250
  },
  hide: {
    effect: "fade",
    duration: 250
  },
  buttons: {
    "Save Sale": {
      text: "Save",
      id: "Module_Dialog_Save",
      click: function() {
        //Handler code
      }
    },
    Cancel: {
      text: "Cancel",
      id: "Module_Dialog_Cancel",
      click: function() {
        //Handler code
      }
    }
  },
  close: function() {
    //Handler code
  }
});
//Show dialog
$( "#dialogContainer" ).dialog( "open" );
function Delete(){
$('#bootStrapModal').modal("hide");
}
function Cancel(){
$('#bootStrapModal').modal("hide");
}
function buttonClick(){
$('#bootStrapModal').modal();
}
//Bootstrap modal call - error happens when this is called

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div id="dialogContainer"><button onClick="buttonClick()">This Errors</button></div>
<div class="modal fade" id="bootStrapModal" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
 <div class="modal-content">
   <div class="modal-header">
  <h5 class="modal-title" id="ModalCenterTitle">Delete?</h5>
  <button id="CloseButton" type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
   </div>
   <div class="modal-body">
    Are you sure you want to delete?<br>
    Changes won't be saved until you click Save
   </div>
   <div class="modal-footer">
  <button id="CancelButton" type="button" class="btn btn-secondary" data-dismiss="modal" onClick="Cancel()">Close</button>
  <button id="DeleteButton" type="button" class="btn btn-danger" onClick="Delete()">Delete</button>
   </div>
 </div>
  </div>
</div>

Answer 1

您可以尝试在打开的对话框中调用另一个对话框。 HTML 将如下所示：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div id="dialogContainer">
    <button onClick="buttonClick()">This Errors</button>
</div>

<div id="another-dialogContainer" title="second Container">
    Second Modal here
</div>

然后在您的 javascript 上，您只需在单击按钮时调用第二个对话框

Dialog = $("#dialogContainer").dialog({
    autoOpen: false,
    height: 200,
    width: "50%",
    modal: true,
    show: {
           effect: "fade",
           duration: 250
          },
    hide: {
           effect: "fade",
           duration: 250
          },
    buttons: {
            "Save Sale": {
                        text: "Save",
                        id: "Module_Dialog_Save",
                        click: function() {
                              //Handler code
                         }
                       },
             Cancel: {
                       text: "Cancel",
                       id: "Module_Dialog_Cancel",
                       click: function() {
                        //Handler code
                          }
                        }
                      },
        close: function() {
           //Handler code
            }
         });
     //Show dialog
     $( "#dialogContainer" ).dialog( "open" );

function buttonClick(){
     $( "#another-dialogContainer" ).dialog('open');
  }

  //second dialog Container

$( "#another-dialogContainer" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
     }
 });

然后你可以放一些样式

.ui-dialog {
    top: 0;
    left: 0;
    padding: .2em;
    border:1px;

}
.ui-dialog .ui-dialog-titlebar {
    border:1px;
    display: none;
}
.ui-dialog .ui-dialog-content {
    border: 0;
    padding: 20px;
    font-size:18px;
    color:#CAAD75;
    background-color: #FDF8E4;
    overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0 0;
    background-image: none;
    margin-top: .5em;
    padding: .3em 1em .5em .4em;
    background-color: #846733;
 }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;

}
.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;

}
.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px;

}
.ui-draggable-handle {
    -ms-touch-action: none;
    touch-action: none;
}

snippet here

Answer 2

正如 Recep Karadas 评论的那样，post 有答案。

在 Bootstrap 4 中，enforceFocus 已重命名为 _enforceFocus。

Answer 3

从模态中删除 tabindex="-1" 对我有用：

<div class="modal fade" id="bootStrapModal" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">

Bootstrap 从 jQuery UI 调用的模态对话框：超出最大调用堆栈大小

Bootstrap modal called from jQuery UI Dialog: Maximum call stack size exceeded

jquery

jquery-ui

bootstrap-4