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

其次从正文中删除'modal-open'类，在页面末尾删除'.modal-backdrop'。

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

Answer 3

以防万一其他人遇到类似的问题：我保留了淡入淡出，但只是将data-dismiss="modal"添加到了保存按钮。适合我。

Answer 4

问题是bootstrap异步删除背景。因此，当您在彼此之后快速致电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中的代码：

This is what makes hiding the modal asynchronous：

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

这将检查是否支持转换，并且模式中包含fade类。当两者都是true时，它会在隐藏模态之前等待淡入淡出效果完成。在happens again之前等待removing the backdrop。

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

This check确定是添加还是删除背景。 isShown = true is performed synchronously。当您相互快速致电hide和show后，isShown变为true且检查会添加背景，而不是删除之前的背景，从而产生问题＆＃39}有了。

Answer 5

解决方法是完全隐藏背景，如果您不需要这样的背景： 数据背景= “”

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

Answer 6

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

如何使用数据删除属性

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

data-dismiss="modal" 

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

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

您还可以在onClick上处理JavaScript函数，它将关闭模式并运行JavaScript函数。

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

Answer 7

只需从模态中删除“淡入淡出”类

Answer 8

这对我有用 -

当hidden.bs.modal事件被触发时，jQuery的{​​{1}}函数可以删除具有.remove()类的元素。因此，每次关闭模态时，模态背景将被删除。

.modal-backdrop

祝你好运。

Answer 9

检查元素后，点击浏览器后退按钮后，div类仍然保留modal-backdrop，所以我只是将其删除：

$(window).on('popstate', function() {
    $(".modal-backdrop").remove();
});

Answer 10

在模式中使用关闭按钮，此方法运行良好：

<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel" id="close_model">

成功使用后：

$('#model_form').trigger("reset"); // for cleaning a modal form
$('#close_model').click(); // for closing a modal with backdrop

Answer 11

另一种可能的情况（我的） - 您正在向DOM添加动态模式html，它包含更多的1根节点。这里有一个注释节点也计算，所以，如果你从bootstrap网站复制模板 - 你有它们。

Answer 12

添加：\ n $（“。modal-backdrop”）。hide（）;
控制器中的ng-click功能，防止淡入背景停留。

Answer 13

尝试

$('.modal').on('hide.bs.modal', function () {
    if ($(this).is(':visible')) {
       console.log("show modal")
       $('.modal-backdrop').show();
    }else{
        console.log("hidden modal");
        $('.modal-backdrop').remove();
    }
})

Answer 14

每次打开和关闭模式时，使用下面的代码在body元素上连续添加7px填充。

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

对于仍在使用Bootstrap 3的用户，这是一种hack'ish解决方法。

$('#modalid').modal('hide');
$('.modal-backdrop').hide();
document.body.style.paddingRight = '0'
document.getElementsByTagName("body")[0].style.overflowY = "auto";

Answer 15

为了绕过在 boostrap.js modal.hide() 之后挥之不去的背景，我给了模态中的关闭按钮一个 id，并以编程方式发送了一个点击事件。

<div class="modal-header">
    <h5 class="modal-title">{{title}}</h5>
    <button 
        type="button" 
        class="btn-close" 
        data-bs-dismiss="modal" 
        aria-label="Close"
        :id="`${id}-btn-close`" ></button> 
</div>


...

hideModal (modalElementId = 'modal') {
    // Workaround issue with modal.hide() leaving the overlay behind.
    var modalCloseButton = document.getElementById(`${modalElementId}-btn-close`);
    if (modalCloseButton !== null) {
        modalCloseButton.click();
    }
}

Answer 16

对于仍然在此问题上苦苦挣扎的任何人，我找到了解决方法

首先给你的关闭按钮添加一个 id（如果你不需要或有一个，你可以让它不可见）

<button id="buttonDismiss" type="button" class="close" data-dismiss="modal" aria-label="Close">

并且在您的 Ajax 调用中使用 Javascript 而不是 Jquery 触发点击（丢失对您的 Modal 的引用）

document.getElementById("buttonDismiss").click();

Answer 17

这是为尝试了上述几乎所有内容后无法修复的用户提供的。请去做一些基本的检查，例如脚本的顺序，引用它们和东西。 就个人而言，我使用了引导程序包，由于某种原因，该程序包无法正常工作。切换到单独的脚本使我的生活更加轻松。 嗯是的！以防万一。

Answer 18

如果关闭关闭按钮正常工作，但使用诸如modal（'hide'）之类的动态代码时出现问题，则可以使用此代码。迫使背景完全移除。

对于Bootstrap 3

$modal.on('hidden.bs.modal', function(){
  //remove the backdrop
  jQuery('[data-dismiss="modal"]').click();
});

yourbutton.click(function() {
  $modal.modal('hide');
});

Answer 19

执行操作后，只需触发关闭按钮即可。

示例

$('.close').click();

Answer 20

只需创建一个调用波纹管的事件。在我使用Angular的情况下，只需放入NgOnInit。

let body = document.querySelector('.modal-open');
body.classList.remove('modal-open');
body.removeAttribute('style');
let divFromHell = document.querySelector('.modal-backdrop');
body.removeChild(divFromHell);

Answer 21

将data-backdrop="false"选项作为属性添加到打开模式的按钮。

请参见How to remove bootstrap modal overlay?

Answer 22

我遇到了同样的问题，解决方法是添加属性  data-dismiss="modal" 单击要单击的按钮。

Answer 23

使用此代码完全删除模式：

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

Answer 24

因此，如果你不想删除dom对象的淡入淡出或修补，你所要做的就是确保等待节目完成：

$('#load-modal').on('shown.bs.modal', function () {
    console.log('Shown Modal Backdrop');
    $('#load-modal').addClass('shown');
});

function HideLoader() {
    var loadmodalhidetimer = setInterval(function () {
        if ($('#load-modal').is('.shown')) {                
            $('#load-modal').removeClass('shown').modal('hide');
            clearInterval(loadmodalhidetimer);
            console.log('HideLoader');
        }
        else { //this is just for show.
            console.log('Waiting to Hide');
        }
    }, 200);
}

IMO Bootstrap应该已经这样做了。或许多一点，如果你有可能在没有完成节目的情况下调用hide，你可能想在show.bs.modal上添加一点，添加类'shows'并确保定时器检查显示是在进入循环之前打算。确保在显示的位置清除“显示”。

Answer 25

我遇到的一个问题（可能会帮助某人）只是因为我正在使用部分加载模态。

<li data-toggle="modal" data-target="#priceInfoModal">
<label>Listing Price</label>
<i class="fa fa-money"></i>
@Html.Partial("EditPartials/PriceInfo_Edit")
</li>

我已将部分调用放在同一个列表项中 所以data-target =“＃priceInfoModal”和div id =“priceInfoModal” 在同一个容器中导致我无法关闭我的模态

Answer 26

请加入 {数据驳回=＆＃34;模态＆＃34;} 如第二个答案所述。当使用控制器范围定义的函数使用Angulars ng-commit时，将首先执行data-dismiss，并且永远不会调用控制器范围定义的函数。我花了一个小时来搞清楚这一点。