title: Bootstrap Modal Backdrop Remaining
body: <p>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 <a href="http://jsfiddle.net/4tKtQ/" rel="noreferrer">jsfiddle</a> demonstrating the problem with simply calling the modal function (instead of triggering events).</p>
  
  <pre><code>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);
  });
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;div id="loadingModal" class="modal fade"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;Loading...&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="btnShow"&gt;Show Loading&lt;/button&gt;
  &lt;button id="btnProblem"&gt;Cause show/hide problem&lt;/button&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>elem.on("progress.finish", function () {
      window.setTimeout(loadingModal.modal("hide");
  }, 750);
  </code></pre>
  
  <p>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?</p>