複数のブートストラップモーダルでのスクロールの問題

Question

モーダルを持つページには多くの情報があるので、スクロールする必要があります。このモーダルには、第2のモーダルへのリンクが含まれています。

ときI

• オープンモーダル1
• モーダル2（バックグラウンドでのモーダル1滞在）を開くためのリンクをクリック
• を閉じモーダル2、私は1
モーダルに戻っていますように、

モーダル1はスクロールを失います（まだスクロールバーがありますが何もしません）。代わりに、モーダルはモーダル2を開くときの位置にとどまります。

jsで背景モダルを閉じることで周りを回っていました（しかし、それは2番目のモーダルでスクロールしてしまいます）。私が複数のモーダルを開いたり閉じたりしようとするたびに、私はいつもスクロールに問題があるように見えます。

これを処理する方法についてのご意見はありますか？

Answer 1

はあなたCCSに

.modal { overflow: auto !important; } 

を追加します。

コードなしで、私はこのjsFiddleを作成して問題を再現しました。それとも少なくとも非常に似ています。あなたのコードを追加して、これが動作するかどうかをテストします。

この行をCSSに追加すると、jsFiddleで示されているように問題が解決されました。

他の解決策も提供するgithubのthis threadから取得した解決策。

Answer 2

これは、ソリューションです：

<script> 
    $('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) { 

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

    }); 
</script> 

は「#idofyousecondarymodal」は第二または第三または無限モーダルのIDであることに注意してください。最初のモーダルのIDを書いてはいけません。

例私は2モーダル持っている：

<div id="mymodal1" class="modal fade in" style="display:none;"> 
. 
. 
. 
. 
</div> 
<div id="mymodal2" class="modal fade in" style="display:none;"> 
. 
. 
. 
. 
</div> 

を、スクリプトは次のようになります。

<script> 
    $('#mymodal2').on('hidden.bs.modal', function (e) { 

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

    }); 
</script> 

ジュースは、このコードと作品罰金を追加します。

Answer 3

私のために働いたソリューションをした

$('.modal').on("hidden.bs.modal", function (e) { 
    if ($('.modal:visible').length) { 
     $('body').addClass('modal-open'); 
    } 
}); 

Answer 4

あなたCSSに以下を追加します。/：

.modal 
{ 
    overflow: scroll !important; 
}