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.finish" when I want the modal to hide. There are certain conditions where the modal is hidden very quickly after being shown, causing the modal backdrop to remain on the screen. Subsequent calls to hiding the element do not remove the backdrop. I also can't simply remove all backdrops as other modal windows might be displaying over the loading window. I have put together a jsfiddle demonstrating the problem with simply calling the modal function (instead of triggering events).

var loadingModal = $("#loadingModal");  $("#btnShow").click(function () {    loadingModal.modal("show");     //hide after 3 seconds     setTimeout(function () {         loadingModal.modal("hide");     }, 3000); });  $("#btnProblem").click(function () {    //simulate a loading screen finishing fast, followed by another loading screen     loadingModal.modal("show");     loadingModal.modal("hide");     loadingModal.modal("show");      //Again simulate 3 seconds     setTimeout(function () {         loadingModal.modal("hide");     }, 3000); }); 

And the HTML:

<div id="loadingModal" class="modal fade">   <div class="modal-dialog">     <div class="modal-content">       <div class="modal-body">         <p>Loading...</p>       </div>     </div>   </div> </div> <button id="btnShow">Show Loading</button> <button id="btnProblem">Cause show/hide problem</button> 

Ideally, I would like to resolve this without waiting a specified time before calling modal("hide"). In other words, I want to try to avoid something like:

elem.on("progress.finish", function () {     window.setTimeout(loadingModal.modal("hide"); }, 750); 

I have also tried subscribing to the hidden.bs.modal and shown.bs.modal events from bootstrap to try to show/hide the element if it needs to be, but may be going about this wrong... Any ideas to allow this modal to show/hide?

Answer 1

If after modal hide, faded background is remained and does not let you click any where you can forcefully remove those by using below piece of code.

First hide (all) your modal div elements.

$('.modal').modal('hide'); 

Secondly remove 'modal-open' class from body and '.modal-backdrop' at the end of the page.

$('body').removeClass('modal-open'); $('.modal-backdrop').remove(); 

Answer 2

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.