Bootstrap模态背景剩余

Question

我正在显示一个Bootstrap模式窗口,用于在执行AJAX调用时加载.当加载模式应该显示时,我播放"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

以防万一其他人遇到类似的问题:我发现即使隐藏模态后,该模式的"淡入淡出"也会阻止此背景粘在屏幕上.它似乎是bootstrap.js中的一个错误.

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

简单地删除淡入淡出就足够了我的项目.

Answer 2

如果在模态隐藏之后,保留了褪色的背景,并且不允许您单击任何可以使用下面的代码强行删除它们的地方.

首先隐藏你的模态div元素.

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

其次从body中删除'modal-open'类,在页面末尾删除'.modal-backdrop'.

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

Answer 3

以防万一其他人遇到类似的问题:我保持淡入淡出,但只是添加data-dismiss="modal"到保存按钮.适合我.

Answer 4

问题是引导程序异步删除背景.因此,当您打电话hide并show快速相互跟踪时,背景不会被删除.

解决方案(正如您所提到的)是使用'hidden.bs.modal'事件等待模式完全隐藏.使用jQuery one只执行一次回调.我已经分叉你的jsfiddle来展示它是如何工作的.

// wait for the backdrop to be removed nicely.
loadingModal.one('hidden.bs.modal', function()
{
    loadingModal.modal("show");

    //Again simulate 3 seconds
    setTimeout(function () {
        loadingModal.modal("hide");
    }, 3000);
});
// hide for the first time, after binding to the hidden event.
loadingModal.modal("hide");

查看Bootstrap中的代码:

这就是隐藏模态异步的原因:

$.support.transition && this.$element.hasClass('fade') ?
    this.$element
        .one('bsTransitionEnd', $.proxy(this.hideModal, this))
        .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
    this.hideModal()

这将检查是否支持转换,并且fade类包含在模态中.如果两者都是true,则在隐藏模态之前等待淡入淡出效果完成.在移除背景之前,此等待再次发生.

这就是为什么删除淡入淡出类将隐藏模态同步(不再等待CSS淡入淡出效果完成)以及为什么reznic的解决方案有效.

此检查确定是添加还是删除背景.isShown = true是同步进行的.当你打电话hide并show快速跟随对方时, isShown变成true并且检查添加背景,而不是删除前一个,创建你遇到的问题.

Answer 5

解决方法是完全隐藏背景,如果你不需要这样的背景:data-backdrop =""

<div class="modal fade preview-modal" data-backdrop="" id="preview-modal"  role="dialog" aria-labelledby="preview-modal" aria-hidden="true">

Answer 6

这对我有用-

当hidden.bs.modal事件被触发时，jQuery的.remove()函数可以删除具有.modal-backdrop类的元素。所以每次关闭 modal 时，modal-backdrop都会被移除。

//setting callback function for 'hidden.bs.modal' event
$('#modal').on('hidden.bs.modal', function(){
  //remove the backdrop
  $('.modal-backdrop').remove();
})

祝你好运。

Answer 7

最好和最简单的方法是使用data-dismiss属性。基本上，该data-dismiss属性将消除模态，并且您将看不到背景幕。

如何使用数据删除属性

您需要做的就是在要关闭模式的位置添加以下内容：

data-dismiss="modal" 

例如，我有一个按钮，当有人单击该按钮时，它将关闭模式。

<button class="btn btn-info float-right" onclick="foo()" data-dismiss="modal">Save changes</button>

您还可以打开JavaScript函数onClick，它将关闭模式并运行JavaScript函数。

这是使用data-dismiss属性的最佳方法。

Answer 8

添加：
   $(".modal-backdrop").hide();
控制器中的 ng-click 功能可防止淡入背景停留。