Как показано на картинке ниже, у меня появляется модальное сообщение об ошибке, однако модальное окно спереди не скрывается. Я уже записываю последовательность, чтобы сначала скрыть ход загрузки, а затем - ошибку.
По последовательности за ошибку:
- Скрыть способ выполнения загрузки (серая рамка с кружком)
- Ошибка отображения модальная (красная рамка)
HTML
<div class="modal fade" id="error-upload" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content bg-danger text-white">
<div class="modal-body text-center">
<h3 class="text-white mb-15"><i class="fa fa-exclamation-triangle"></i> ERROR!</h3>
<span>Upload Failed.</span>
<p>Filename already exist.</p>
<p></p>
<button type="button" class="btn btn-light" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="uploading-modal" tabindex="-1" role="dialog" aria-labelledby="uploadingLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-sm" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<div class="loader"></div>
<div class="loader-txt">
<p>Please wait while file is Uploading.</p>
</div>
</div>
</div>
</div>
</div>
JS
$("#btnYes").on("click",function(e){
e.preventDefault();
$.ajax({
url: 'example.com'
type: 'POST',
data: fd,
xhrFields: {
withCredentials: true
},
contentType: false,
processData: false,
beforeSend: function(){
$("#uploading-modal").modal({
backdrop: "static", //remove ability to close modal with click
keyboard: false, //remove option to close with keyboard
show: true //Display loader!
});
},
success: function(response){
console.log(response);
if(response != 0){
$('#success-modal').modal('show');
}else{
alert('File Format Not Supported');
}
$("#uploading-modal").modal("hide");
},
error: function(e){
console.log(e);
$("#uploading-modal").modal("hide");
$("#error-upload").modal('show');
},
});
});