Question

在Bootstrap 3中我有一个模态形式（我们称之为父模态）。它被称为：

<a href="#" data-toggle="modal" data-target="#receiptmodal" data-backdrop="static" data-keyboard="false"> <i class="fa fa-usd"></i> <strong>Receive Money</strong> </a>

它有这样的子模态：

$('#childmodal').modal({backdrop: "static", keyboard: "false"});

父级高于我的视口并且它会滚动，但是在子模式关闭后，父级将不会滚动 - 相反，保持父模式的页面会滚动，即使它仍然是灰色并禁用。

子模态是这样关闭的： $("#childmodal").modal('hide');。我也试过toggle而没有运气。

为什么会这样？我需要父模式在打开和关闭子模态之前像它一样滚动。

非常感谢！

Answer 1

虽然joashp帮助我找到答案，但我想发表一个完整性答案。

Joashp对于正文中的modal-open类是正确的，我的测试显示添加该类允许父模式再次滚动。问题在于，虽然它在测试中起作用，但在现实世界中却没有。为了完全解决这个问题，我在jQuery完全隐藏模态后添加modal-open类添加到主体。为此，我不得不使用模态的回调。当jQuery最终完成隐藏时，“隐藏”会引发攻击：

$('#childmodal').on('hidden.bs.modal', function () { $('body').addClass('modal-open'); });

Answer 2

真正的答案在于时机。在花了几个小时跟踪课程中发生的事情之后，我尝试了以下内容，它就像它应该的那样工作。基本上，在尝试打开第二个模态之前，需要等待初始模态完全隐藏。像这样。

$("#idmodal1").modal("hide");
/*When the modal is COMPLETELY hidden */
$("#idmodal1").on('hidden.bs.modal', function () {
                        $("#idmodal2").modal("show");/*Show the second modal*/ 
                   });

第二个模态现在将正常滚动。

Answer 3

这是因为模态关闭后的DOM，身体仍然应用了这个类：“。modal-open”。

删除此类会使页面恢复正常状态，滚动等等。所以你需要：

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

子模态关闭后，Bootstrap模态不会滚动

3 个答案: