Bootstrap Modal Backdrop Remaining

Question

I am showing a Bootstrap modal window for loading when performing AJAX calls. I broadcast a \"progress.init\" event when the loading modal should show and a \"progress.finis

Answer 1

After perform action just trigger the close button.

Example

$('.close').click();

Answer 2

Just create an event calling bellow. In my case as using Angular, just put into NgOnInit.

let body = document.querySelector('.modal-open');
body.classList.remove('modal-open');
body.removeAttribute('style');
let divFromHell = document.querySelector('.modal-backdrop');
body.removeChild(divFromHell);

Answer 3

for Bootstrap 4, this should work for you

 $('.modal').remove();
 $('.modal-backdrop').remove();

Answer 4

Just in case anybody else runs into a similar issue: I found taking the class "fade" off of the modal will prevent this backdrop from sticking to the screen even after the modal is hidden. It appears to be a bug in the bootstrap.js for modals.

Another (while keeping the fade effects) would be to replace the call to jQueryElement.modal with your own custom javascript that adds the "in" class, sets display: block, and add a backdrop when showing, then to perform the opposite operations when you want to hide the modal.

Simply removing fade was sufficient for my project.

Answer 5

Just in case anybody else runs into a similar issue: I kept the fade, but just added data-dismiss="modal" to the save button. Works for me.

Answer 6

Add this:
    $(".modal-backdrop").hide();
to the ng-click function in controller to prevent the fade-in backdrop from staying.