Javascript 引导模式

我展示了一个引导模式窗口，用于在执行AJAX调用时加载。当加载模式应该显示时，我广播一个“progress.init”事件；当我想隐藏模式时，广播一个“progress.finish”。在某些情况下，模式在显示后会很快隐藏，导致模式背景保留在屏幕上。隐藏元素的后续调用不会移除背景。我也不能简单地删除所有背景，因为其他模式窗口可能会显示在加载窗口上。我把一个例子放在一起，演示了如何简单地调用模态函数（而不是触发事件）来解决这个问题

以及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>

---

我还尝试从bootstrap订阅hidden.bs.modal和show.bs.modal事件，以尝试在需要时显示/隐藏元素，但这可能是错误的。。。有什么办法可以让这个模式显示/隐藏吗？

以防其他人遇到类似的问题：我发现关闭模式的“淡入”类可以防止背景在模式隐藏后仍然粘在屏幕上。这似乎是modals的bootstrap.js中的一个bug

另一种方法（在保持淡入淡出效果的同时）是用自己的自定义javascript替换对jQueryElement.modal的调用，该javascript添加“in”类，设置display:block，并在显示时添加背景，然后在想要隐藏模式时执行相反的操作

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

---

只需删除淡入淡出就足够了。

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

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

以防其他人遇到类似问题：我保持淡入淡出状态，但只是在保存按钮中添加了

data disclesh=“modal”

。对我有效。

检查元素后，在我点击浏览器后退按钮后，带有

模态背景的
div
类仍然保留，因此我只需将其删除：

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

如果在模式隐藏之后，褪色的背景仍然存在，并且不允许您单击任何可以使用下面的代码强制删除这些背景的位置

首先隐藏（所有）模态div元素

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

其次，从正文中删除“modal open”类，并在页面末尾删除“.modal background”

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

问题是引导异步删除背景。因此，当您依次快速调用
hide
和
show
时，背景不会被移除

解决方案（如您所述）是使用
'hidden.bs.modal'
事件等待模式完全隐藏。使用jQuery只执行一次回调。我用叉子叉了你的腿来展示这是如何工作的

// 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");

查看引导程序中的代码：

:

这将检查是否支持转换，并且模式中是否包含
淡入淡出
类。当两者均为
true
时，它会等待淡入淡出效果完成，然后再隐藏模式。这是在等待之前

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

确定是添加还是删除背景。当您依次快速调用
隐藏
和
显示
时，
显示
将变为
真实
，并且该复选框会添加背景，而不是删除上一个背景，从而造成您遇到的问题。
小心添加
{data dismise=“modal”}
如第二个答案所述。使用控制器范围定义函数处理Angulars ng commit时，将首先执行数据消除，并且从不调用控制器范围定义函数。我花了一个小时来解决这个问题。
另一种可能的情况（我的情况）-您正在动态地向DOM添加模式html，它包含更多的根节点。这里的问题是，注释节点也很重要，所以，如果您从引导站点复制了模板，您就拥有了它们。
这就是我的工作原理-

当触发
hidden.bs.modal
事件时，
jQuery
的
.remove（）
函数可以删除具有
modal background
类的元素。因此，每次关闭模态时，模态背景都将被移除

祝你好运。
我遇到的一个问题（可能对某人有帮助）就是我使用了一个partial来加载模态

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


上市价格
@Html.Partial（“编辑部分/价格信息编辑”）


我已将部分调用放在同一列表项中
因此，数据目标=“价格信息模式”和div id=“价格信息模式”
在同一个容器中，导致我无法关闭我的模式
添加以下内容：
    $（“.modal background”）.hide（）
单击控制器中的ng click功能，以防止背景淡入。
因此，如果您不想删除淡入或修补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引导程序应该已经在这样做了。好的，也许还有一点，如果您可能在没有完成show的情况下调用hide，那么您可能需要在show.bs.modal上添加一点，添加类“showing”，并确保计时器在进入循环之前检查showing是否是预期的。确保在显示点清除“显示”。
最好且简单的方法是使用
数据解除属性。基本上，
数据解除
属性将解除模态，您将看不到剩余的背景

如何使用数据属性
您只需在要关闭模式的位置添加以下内容：

data-dismiss="modal" 

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

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

保存更改

您还可以在单击上处理JavaScript函数，它将关闭模式并运行
<li data-toggle="modal" data-target="#priceInfoModal">
<label>Listing Price</label>
<i class="fa fa-money"></i>
@Html.Partial("EditPartials/PriceInfo_Edit")
</li>

$('#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);
}

data-dismiss="modal" 

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

 $('.modal').remove();
 $('.modal-backdrop').remove();

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

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

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

$('.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();
    }
})

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

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

<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

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

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

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