Popup modal does not close when Ajax throws and error - ajax

Question

I am submitting a form using Ajax and then notify the user.
I have three different pop-up modals for wait, success and error respectively.
When the submit button is clicked, the wait modal pops while the form gets submitted. Thereafter either the success or error modal pops up. Issue is that on HTTP error the wait modal fails to close and as a result overlays the error modal. How can I solve this?
<!-- 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">×</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">×</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

I resolved this by using a normal div that fills entire page and set its opacity to 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;
}
then call:
document.getElementById('wait').style.display = 'block';
or
document.getElementById('wait').style.display = 'none';