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

我嘗試使用新代碼后，滾動問題就消失了。