模态内的引导模态；关闭模态后无法滚动答案

【问题标题】：Bootstrap modal inside a modal; Cannot scroll after closing modal模态内的引导模态；关闭模态后无法滚动
【发布时间】：2017-08-20 16:52:32
【问题描述】：

我有一个引导模式，它调用另一个引导模式。现在的问题是，当我打开第二个引导模式并关闭它时，第一个引导模式不再滚动。相反，滚动是由后台主页获得的。我应该在这里做什么，以便当我关闭第二个模态时，第一个模态会聚焦并获得第二个模态之前的滚动。

$('#modalTrigger').on('click', function () {
    setTimeout(function () {
        $('#modalBody').html($('#contentText').html());
    }, 1000);
});

$('#btnPrimaryModalAction').on('click', function () {
    $('#secondaryModal').modal('show'); 
});

这里是指向JSFIDDLE 的链接，其中包含定义上述情况的两个引导模式。

【问题讨论】：

您是否尝试在显示第二个模态之前隐藏第一个模态？
我希望两种模式都出现。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

Bootstrap modal 显示时会为您的 <body> 元素添加一个新的 modal-open 类。当被关闭时，它会删除 modal-open 类。

因此，您只需在关闭子模式时将该类重新应用到您的 <body> 元素。事情是这样的：

为父模态中的模态添加一个新的自定义 css 类。

就我而言，我使用.child-modal，

/* when using a modal within a modal, add this class on the child modal */
$(document).find('.child-modal').on('hidden.bs.modal', function () {
    console.log('hiding child modal');
    $('body').addClass('modal-open');
});

html

<div class="modal fade" tabindex="-1" role="dialog">
     ...
     <a href="#" data-toggle="modal" data-target="#other_modal" title="Help">
       Open the other modal
     </a>
     ...
</div>
<div class="modal fade child-modal" id="other_modal" tabindex="-1" role="dialog">
   ... other codes here ...
</div>

【讨论】：

【解决方案2】：

您的问题必须处理打开模式时引导程序如何“锁定”正文元素。在打开模式时的 body 元素上，将添加类 modal-open。当您打开第二个模式时，什么也没有发生，但是当您关闭它时.. 它会删除所需的类model-open。您需要向您的 js 添加一些逻辑以将该类保留在那里，直到最后一个模式关闭。它并不是真的要在模态中添加模态。

我建议尝试使用通过引导程序提供给您的模态事件方法来规避HERE

【讨论】：

或者你可以编辑它自己的框架来处理模态内部的模态，检查主体上的modal-open类和可见的模态，并进行相应的处理。