web-dev-qa-db-ja.com

bootstrapモーダルはスクロールバーを削除します

ページでモーダルビューをトリガーすると、スクロールバーが表示されなくなります。モーダルが移動または消えると背景ページが移動し始めるため、これは迷惑な効果です。その効果の治療法はありますか？

javascripttwitter-bootstrapmodal-dialog
75
El Dude

これは機能です。クラスmodal-openは、モーダルを表示するとHTML bodyに追加され、非表示にすると削除されます。

bootstrap cssが言うので、これはスクロールバーを非表示にします

.modal-open {
    overflow: hidden;
}

これをオーバーライドするには、次を指定します

.modal-open {
    overflow: scroll;
}

in 独自 css。

102
flup

私は使った

.modal-open {
  overflow-y: scroll;
}

この場合、水平スクロールバーを表示しないようにします

25
Mauro

inheritはscrollよりも優れていると思います。なぜなら、モーダルを開くと、常にスクロールで開きますが、スクロールがないと同じ問題が発生するからです。だから私はこれをするだけです：

.modal-open {
  overflow: inherit;
}
24
Alisson Alvarenga

Overflow-y：scrollを使用して本文からパディングを削除すると、bootstrapモーダルがページ本文にパディングを追加する方が適切です。

.modal-open {
  overflow:hidden;
  overflow-y:scroll;
  padding-right:0 !important;
}

IE browser Compatible： IE browserはデフォルトで同じことをしています。

14
Super Model

この投稿に出くわしたことに感謝します！私は自分の閉じるリンクを使用してウィンドウを閉じるときにスクロールバーを元に戻す方法を考えて、髪を引っ張っていました。 CSSの提案を試しましたが、正しく機能しませんでした。読んだあと

クラスmodal-openは、モーダルを表示するとHTML本文に追加され、非表示にすると削除されます。 -@flu​​p

私はjqueryを使用して解決策を思いついたので、他の誰かが同じ問題を抱えており、上記の提案が機能しない場合-

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>
9
Rich

私はこのBootstrapモーダルの「機能」で遊んでいました。 .modalクラスにはoverflow-y:auto;があるようです。したがって、モーダルラッパーは、モーダル自体が高くなったときに独自のスクロールバーを取得します。

常にスクロールバーが必要な場合（デザイナーがよく行うことです）最初に本文を設定します

body {
    overflow-y:scroll;
}

次に.modal-openを処理します

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

この場合、スクロールバーは無効のままにしてください

このページの他のすべての回答は、私のコンテンツをジャンプさせ続けました。

ヘッドアップ！

このソリューションは常に私にとってはうまくいきましたが、昨日、モーダルがドラッグ可能で画面に収まるように大きくなったときに（垂直方向）この修正を使用するときに問題が発生しました。追加したposition:sticky要素と関係があるのでしょうか？

3
Brainfeeder

独自のcssファイルを作成して、ブートストラップの特定の部分をカスタマイズする場合は、より良い方法です。

bootstrapのc​​ssファイルを変更しないでください。ページの他の部分で使用すると、bootstrapのすべてが変更されます。

ページが多少長い場合、自動的にスクロールバーが表示されます。そして、モーダルを開くと、スクロールバーが非表示になります。これは、デフォルトでbootstrapが行うことです。

モーダルを開いたときに非表示にならないようにするには、独自のcssファイルにcssコード（以下）を追加してオーバーライドします。

.modal-open {
    overflow: scroll;
}

ただその逆...

.modal-open {
    overflow: hidden;
}
1
NormanCabilatazan

bootstrapモーダルは、開いたときにパディングを追加するため、独自のcssでこのコードを試すことができます。

.modal-open {
    padding: 0 !important;
}
0
mehdigriche

さらに、モーダルポップアップが内部のコンテンツでスクロールする必要があり、親が静止したままにする必要がある場合、Custom.cssに次を追加します（cssをオーバーライドします）。

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}
0
Oracular Man