多个引导模态的滚动问题

Question

我有一个页面，其中包含大量信息的模态，因此您需要滚动。此模态包含指向第二个模态的链接。

当我

• 开放模式1
• 点击链接打开模态2（模态1停留在后台）
• 然后关闭模态2，以便我回到模态1

模态1失去滚动（仍然有一个滚动条，但它没有做任何事情）。相反，模态保持在打开模态2时的位置。

我一开始就用js关闭背景模态（但这会让第二个模态上的滚动变得混乱）。似乎每当我尝试打开/关闭多个模态时，我总是会遇到滚动问题。

有关如何处理这个的任何建议？

Answer 1

加

.modal { overflow: auto !important; }

到你的CCS。

没有你的代码我继续创建这个jsFiddle，重新创建你的问题，或者至少是一个非常相似的问题。添加您的代码，我将测试这是否有效。

将该行添加到CSS修复了问题，如此jsFiddle所示。

解决方案取自gazub上的this thread，也提供其他解决方案。

Answer 2

对我有用的解决方案是：

$('.modal').on("hidden.bs.modal", function (e) { 
    if ($('.modal:visible').length) { 
        $('body').addClass('modal-open');
    }
});

Answer 3

   $(document).on('hidden.bs.modal', '.modal', function () {
        $('.modal:visible').length && $(document.body).addClass('modal-open');
   });

Answer 4

这是解决方案：

<script>
    $('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) {

      $('body').addClass('modal-open');

    });
</script>

注意“#idofyousecondarymodal”是二级或三级或无限模态的id。但永远不要写第一个模态的ID。

例如我有2个模态：

<div id="mymodal1" class="modal fade in" style="display:none;">
.
.
.
.
</div>
<div id="mymodal2" class="modal fade in" style="display:none;">
.
.
.
.
</div>   

然后脚本将是：

<script>
    $('#mymodal2').on('hidden.bs.modal', function (e) {

      $('body').addClass('modal-open');

    });
</script>

jus添加此代码并正常工作。

Answer 5

在CSS中添加以下内容：

.modal
{
  overflow: scroll !important;
}