javascript - 剩余的 Bootstrap 模态背景

Question

我正在展示一个用于在执行 AJAX 调用时加载的 Bootstrap 模态窗口。当加载模式应该显示时，我广播一个“progress.init”事件，当我希望模式隐藏时，我广播一个“progress.finish”事件。在某些情况下，模态框在显示后会很快隐藏，导致模态框背景保留在屏幕上。对隐藏元素的后续调用不会删除背景。我也不能简单地删除所有背景，因为其他模式窗口可能会显示在加载窗口上。我整理了一个 jsfiddle通过简单地调用模态函数(而不是触发事件)来演示问题。

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);
});

和 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>

理想情况下，我希望在调用 modal("hide") 之前无需等待指定时间即可解决此问题。换句话说，我想尽量避免这样的事情:

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

我还尝试从 Bootstrap 订阅 hidden.bs.modal 和 shown.bs.modal 事件，以尝试在需要时显示/隐藏该元素，但可能会出错...任何想法允许此模式显示/隐藏？

Answer 1

如果在模态隐藏后，褪色的背景仍然存在并且不允许您单击任何可以使用以下代码强行删除的地方。

首先隐藏(所有)您的模态 div 元素。

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

其次从正文中删除“modal-open”类和页面末尾的“.modal-backdrop”。

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