ブートストラップモーダルはトグル、バックグラウンドスクロールでアクティブな要素にはなりませんが、モーダルはスクロールしません

さまざまなモーダルを使用してユーザーに情報を表示するWebページがあります。

これらのモーダルは、通常$("#id").modal("toggle")、モーダルの表示をオンに切り替えるために呼び出す特定のボタンによってトリガーされます。ある特定のシナリオでは、上記の関数を使用して2番目のモーダルを表示する1つのモーダルがあります。また、同じ関数を使用して自分自身を隠すので、次のことを行うonClick関数があります。

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

問題は、AddressProspectモーダルが表示されたときに、アクティブな要素に変更されていないように見えることです。背景が暗くなり、モーダルが正しく表示されます。ただし、スクロールしようとすると、モーダルが実際に表示されていないかのように、代わりに背景要素がスクロールします。

私はいくつかの異なるアプローチを試みました。私が使用している.modal("show")と.modal("hide") to display the modals I need. I have also triedのデータが、却下=ニーズが隠されることモーダルのボタン内の「モーダル」。これらはすべてまったく同じ結果を生み出しました。

興味深いことに、コンソールに移動して次のコマンドを実行すると、

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

予想どおり、背景がスクロール不能になり、AddressProspectモーダルがスクロール可能になります。

私のページでは約10のモーダルが使用されていますが、問題のモーダルを除いて、この問題はありません。わかりやすくするために本文を削除して、以下のこの投稿で言及されている2つのモーダルにコードを投稿しました。

<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>