I was having this same problem in a web app using Microsoft Visual Studio 2019, Asp.Net 3.1 and Bootstrap 4.5. I had a modal form open to add a new staff person (only a few input fields) and the Add Staff button would invoke an ajax call to create the staff records in the database. Upon successful return the code would refresh the partial razor page of staff (so the new staff person would appear in the list).
Just before the refresh I would close the Add Staff modal and display a Please Wait modal which only had a bootstrap spinner button on it. What happened is that the Please Wait modal would stay displayed and not close after the staff refresh and the modal('hide') function on this modal was called. Some times the modal would disappear but the modal backdrop would remain effectively locking the Staff List form.
Since Bootstrap has issues with multiple modals open at once, I thought maybe the Add Staff modal was still open when the Please Wait modal was displayed and this was causing problems. I made a function to display the Please Wait modal and do the refresh, and called it using the Javascript function setTimeout() to wait 1/2 second after closing/hiding the Add Staff modal:
//hide the modal form
$("#addNewStaffModal").modal('hide');
setTimeout(RefreshStaffListAfterAddingStaff, 500); //wait for 1/2 second
Here is the code for the refresh function:
function RefreshStaffListAfterAddingStaff() {
// refresh the staff list in our partial view
//show the please wait message
$('#PleaseWaitModal').modal('show');
//refresh the partial view
$('#StaffAccountsPartialView').load('StaffAccounts?handler=StaffAccountsPartial',
function (data, status, jqXGR) {
//hide the wait modal
$('#PleaseWaitModal').modal('hide');
// enable all the fields on our form
$("#StaffAccountsForm :input").prop("disabled", false);
//scroll to the top of the staff list window
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
});
}
This seems to have totally solved my problem!