web-dev-qa-db-ja.com

複数のbootstrap modalsによるスクロールの問題

たくさんの情報があるモーダルのページがあるので、スクロールする必要があります。このモーダルには、2番目のモーダルへのリンクが含まれています。

私が

  • モーダル1を開く
  • リンクをクリックしてモーダル2を開きます（モーダル1はバックグラウンドのままです）
  • モーダル2を閉じて、モーダル1に戻ります

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

私は最初にjsでバックグラウンドモーダルを閉じて遊んでみました（ただし、2番目のモーダルでのスクロールはめちゃくちゃです）。複数のモーダルを開いたり閉じたりしようとするたびに、スクロールに関する問題が常に発生するようです。

これを処理する方法について何か提案はありますか？

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal
19
gpanterov

追加

.modal { overflow: auto !important; }

あなたのCCSに。

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

CSSにその行を追加すると、この jsFiddle で示されるように問題が修正されました。

他のソリューションも提供するgithubの this thread から取得したソリューション。

16
Keeleon

私のために働いた解決策は：

$('.modal').on("hidden.bs.modal", function (e) { 
    if ($('.modal:visible').length) { 
        $('body').addClass('modal-open');
    }
});
19
Abir.d
   $(document).on('hidden.bs.modal', '.modal', function () {
        $('.modal:visible').length && $(document.body).addClass('modal-open');
   });
4
Ahsan Khan

これが解決策です：

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

jusはこのコードを追加して正常に動作します。

3
Luis Villadiego

以下を[〜＃〜] css [〜＃〜]に追加してください：

.modal
{
  overflow: scroll !important;
}
0
Sreenath S