Bootstrap模态在切换，后台滚动时不变为活动元素，但模态不滚动

Question

我有一个网页，该网页利用许多不同的模式向用户显示信息。

这些模态由某些按钮触发，这些按钮通常调用$("#id").modal("toggle")来打开模态的可见性。 在一个特定的场景中，我有一个模态，它通过使用上述函数显示第二个模态。 它也通过使用相同的函数来隐藏自身，因此我有一个执行以下操作的onClick函数。

$("#EditTask").modal("hide");
$("#AddressProspect").modal("show");

问题在于，当显示AddressProspect模式时，好像没有将其更改为活动元素。 背景变暗，并且模态正确显示。 但是，当我尝试滚动时，背景元素会滚动，就像实际未显示模式一样。

我尝试了多种不同的方法。 我已经使用.modal("show")和.modal("hide") to display the modals I need. I have also tried .modal("hide") to display the modals I need. I have also tried了需要隐藏的模态按钮内的data-dismiss =“ modal”。 这些都产生了完全相同的结果。

有趣的是，如果我进入控制台并执行以下命令

$("body").css("overflow-y", "hidden");
$("#AddressProspect").css("overflow-y", "scroll");

就像我期望的那样，背景变得不可滚动，而AddressProspect模态也变得可滚动。

我的页面中使用了大约10个模态，除了所讨论的模态之外，这些模态都没有。 我已将代码发布到下面这篇文章中提到的两个模式中，为了清楚起见，删除了它们的主体。

<div class="modal fade bd-example-modal-lg" id="EditTask" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><span class="Title">Title</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                    -snip-

            </div>
            <div class="modal-footer">
                <div style="width: 100%">
                    <button type="button" class="btn btn-warning action-skip-instruction" style="float: left;" data-dismiss="modal">Skip Instruction</button>
                </div>

                <button type="button" class="btn btn-secondary action-close-edit-modal">Close</button>
                <button type="button" id="edit-task-button-defer" class="btn btn-warning edit-task-action" style="display: none;">Defer</button>
                <button type="button" id="edit-task-button-action" class="btn btn-success edit-task-action" data-dismiss="modal">Complete</button>

            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="AddressProspect" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="max-width: 600px;" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">New Security Address Prospect</h5>
                </div>

                <div class="modal-body">

                    -snip-

                </div>
                <div class="modal-footer">
                    <div style="width: 100%">
                        <button type="button" class="btn btn-warning prospect-button-clear" style="float: left;">Clear</button>
                    </div>

                    <button type="button" style="float: left;" class="btn btn-danger prospect-button-close" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success prospect-button-update">Update</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

经过一段时间的解决后，我设法弄清了为什么会这样以及如何解决它。

我在两个地方寻找有关此主题的信息：

Bootstrap回购上的这个Github问题

有关模态方法的Bootstrap文档

通过阅读Github问题，我们可以看到一个用户注意到对.modal("hide")和.modal("show")的调用是异步的，因此快速连续使用它们是无效的。 相反，我们必须通过侦听shown或hidden事件来等待显示/隐藏完成。

为此，我们可以使用以下功能：

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

通过检查hidden.bs.modal类是否放入模态的类列表中，我们可以验证hide动画何时完全完成。 此时，我们可以调用下一个要显示的模式的show方法，以确保由Bootstrap处理的所有后台事件均已完成执行，并确保预期的行为。

我以前的代码来自：

$("#EditTask").modal("hide");
$("#AddressProspect").modal("show");

至：

$("#EditTask").modal('toggle');
$("#EditTask").on("hidden.bs.modal", function() {
      $("#AddressProspect").modal('toggle');        
      });

我尝试使用新代码后，滚动问题就消失了。