剩余的 Bootstrap 模态背景 [英] Bootstrap Modal Backdrop Remaining

问题描述

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

var loadingModal = $("#loadingModal");$("#btnShow").click(function () {loadingModal.modal("show");//3秒后隐藏设置超时(函数(){loadingModal.modal("隐藏");}, 3000);});$("#btnProblem").click(function () {//模拟一个快速完成的加载屏幕，然后是另一个加载屏幕loadingModal.modal("show");loadingModal.modal("隐藏");loadingModal.modal("show");//再次模拟3秒设置超时(函数(){loadingModal.modal("隐藏");}, 3000);});

还有 HTML:

<div class="modal-dialog"><div class="modal-content"><div class="modal-body"><p>正在加载...</p>

<button id="btnShow">显示加载</button><button id="btnProblem">导致显示/隐藏问题</button>

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

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

我也尝试从 bootstrap 订阅 hidden.bs.modal 和 shown.bs.modal 事件，以尝试在需要时显示/隐藏元素，但可能会出现这个错误......任何想法允许此模式显示/隐藏?

解决方案

以防万一其他人遇到类似问题:我发现将类从模态中淡出"可以防止这个背景粘在屏幕上模式隐藏后.它似乎是 bootstrap.js 中用于模态的错误.

另一个(同时保持淡入淡出效果)将使用您自己的自定义 javascript 替换对 jQueryElement.modal 的调用，该 javascript 添加in"类，设置 display: 块，并在显示时添加背景，然后执行当你想隐藏模态时，相反的操作.

对于我的项目来说，简单地去除淡入淡出就足够了.

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?

解决方案

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.

这篇关于剩余的 Bootstrap 模态背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！