ブートストラップモーダルは、子モーダル閉じ後にスクロールしません。

Question

ブートストラップ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

これはモーダルが閉じた後のDOMのため、ボディにはまだこのクラスが適用されているためです： ".modal-open"。

このクラスを削除すると、ページが通常の状態（スクロールなど）に戻ります。したがって、あなたは次のことを行う必要があります：

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

Answer 2

私は答えを見つけるのに役立ちましたが、私は完全性のための回答を投稿したいと思います。

Joachpが体内のmodal-openクラスについて正しいと私のテストでは、そのクラスを追加すると親モダルが再びスクロールできることが示されました。問題は、それがテストで働いていた間、それは現実世界ではなかったということです。問題を完全に解決するために、私はmodal-openクラスをボディに追加するためにjQueryがモーダルを完全に隠し終わった後に追加します。そのためには、モーダルのコールバックを使用しなければなりませんでした。 jQueryのは最終的に完成隠れている「隠された」火災：

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

Answer 3

本当の答えはタイミングです。クラスに何が起こっているかを追跡するのに数時間を費やした後、私は次のことを試して、それはちょうどうまくいくように動作します。基本的には、2番目のモーダルを開こうとする前に最初のモーダルが完全に隠れるのを待つ必要があります。このような。

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

2番目のモーダルは通常どおりスクロールします。