У меня странная проблема. Я вызываю модал Bootstrap, пока открыто диалоговое окно jQuery UI, и я получаю RangeError: Maximum call stack size exceeded. в консоли
Странно, но это происходит только тогда, когда я вызываю модал, когда открыто диалоговое окно.
Похоже, у него нет заметных побочных эффектов, хотя я бы предпочел, чтобы ошибки не было.
Я также получаю ту же ошибку, когда нажимаю любую кнопку в Модале начальной загрузки.
Я использую 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">×</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>