当Ajax抛出并出错时，弹出模式不会关闭

Question

我正在使用Ajax提交一个表单，然后通知用户。我有三种不同的弹出模式，分别用于等待、成功和错误。当点击submit按钮时，表单提交时会弹出wait模式。此后，成功或错误模式弹出。问题是，在HTTP错误时，wait模式无法关闭，因此覆盖了错误模态。我该如何解决这个问题？

<!-- Success Modal-->
<div class="modal fade" id="notify" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalTitle">Success</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
@{
string action = ViewContext.RouteData.Values["action"].ToString().ToLower();
if (action == "Create")
{
action = "created";
}
else
{
action = "updated";
}
}
Record has been successfully @action.

</div>
<div class="modal-footer">
<button type="button" class="Close" data-dismiss="modal" onclick="closeModals()">Close</button>
</div>
</div>
</div>
</div>
<!-- Error Modal-->
<div class="modal fade" id="error" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header" id="error-header">
<h5 class="modal-title" id="ModalTitle">Error</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Failed to @ViewContext.RouteData.Values["action"].ToString().ToLower() record.
</div>
<div class="modal-footer">
<button type="button" id="modalClose" data-dismiss="modal" class="CloseError" onclick="closeModals()">Close</button>
</div>
</div>
</div>
</div>

<!--Please Wait Modal-->
<div class="modal fade" id="wait" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="background-color: transparent; text-align: center; border-style: none;">
<div class="modal-content" style="background-color: transparent; text-align: center;border-style:none;">
<div class="modal-body" style="background-color: transparent; text-align: center;border-style:none;">
<img id="waitImage" src="~/images/orderit_logo.png" height="100" width="100" />
<div style="color: #f9a51a;">
please wait...
</div>

</div>
</div>
</div>
</div>  

<script>        
$("#Save").on("click", function (event) {
$('#wait').modal('toggle');
var formData = new FormData(document.getElementById("form"));
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
success: function (data) {
$('#wait').modal('hide');
$('#notify').modal('toggle');
},
error: function (data) {
$('#wait').modal('hide');
$('#error').modal('toggle');
},
failure: function (data) {
$('#wait').modal('hide');
$('#error').modal('toggle');

},
cache: false,
contentType: false,
processData: false
});
return false;
})
});

</script>

Answer 1

我通过使用一个填充整个页面的普通div来解决这个问题，并将其不透明度设置为80%。

<div id="wait">
<img id="waitImage" src="~/images/orderit_logo.png" height="100" />
<div style="color: #f9a51a; top: 65%; position: absolute; text-align:center;width:100%;">
please wait...
</div>
</div>
#wait {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
background-color: rgba(19, 33, 106, 0.8); /*#f9a51a*/
text-align: center;
border-style: none;
z-index: 3000;
display:none;
}

然后调用：

document.getElementById('wait').style.display = 'block';

或

document.getElementById('wait').style.display = 'none';