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

Question

我有一个有点奇怪的问题。我正在调用 Bootstrap Modal，同时打开了 jQuery UI 对话框并进入RangeError: Maximum call stack size exceeded.控制台

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

当我单击 Bootstrap Modal 中的任一按钮时，我也会遇到相同的错误。

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

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

虽然我有一种感觉，这可能与将两者设置为模式有关，但我在这里错过了一些明显的东西吗？

整个项目既复杂又庞大，所以我在下面放了一些片段：

//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

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

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

Answer 2

正如 Recep Karadas 评论的那样，这篇文章给出了答案。

/sf/answers/3379638461/

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