如下图所示,出现了我的错误模态,但是前面的模态没有隐藏。我已经写好了先隐藏上传模式进度的顺序,然后是错误模式。
按错误顺序排列:
- 隐藏上传进度模式(带圆圈的灰色框)
- 显示错误模式(红色框)
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');
},});
});