web-dev-qa-db-ja.com

Twitter Bootstrap 3スクロール可能なボディを持つモーダル

Bootstrap 2からBootstrap= 3.に移動しています。古いバージョンでは、コンテンツが長いモーダルを使用していました。最大の高さに達しました。

Bootstrap 3では、モーダルはコンテンツ全体を表示するように拡張されているだけであり、実際にページの最後に到達してモーダルフッターのボタンを見るにはページダウンキーを使用する必要があります。ブラウザウィンドウの右端にあるスクロールバーを使用してください。スクロールバーは背景で覆われているため、モーダルボックス内のコンテンツだけをスクロールするのは直感的ではありません。

bootstrap 3でモーダルを実現して、最大高さに達したときに自動的にスクロールバーを挿入してコンテンツをスクロールするにはどうすればよいですか？

次のように、モーダルクラスに最大高さを設定してみました。

.modal{
   max-height:80%;
}
.modal-header{
   height:15% !important;    
}
.modal-body{
   height:70%;
   overflow:auto;
}
.modal-footer{
   height:15%;
}

しかし、期待どおりに機能しません。モーダルウィンドウは最大サイズに達しますが、コンテンツをそこにカットするだけで、フッターも表示されません。

助けてくれてありがとう。

csstwitter-bootstraptwitter-bootstrap-3modal-dialog
22
Vero

追加するだけです：

.modal-content {
  height:250px;
  overflow:auto;
}

もちろん、身長は個人のニーズに合わせて調整できます。

実施例

更新：

実際には非常に簡単です。追加するだけです：

.modal-body {
    max-height: calc(100vh - 212px);
    overflow-y: auto;
}

あなたのCSSに。

vh と calc を使用しますが、これらはたまたま適切なブラウザサポート（IE9 +）を持っています。

これはこれに基づいています answer 。より詳細な情報についてはそこを読んでください、私は彼の答えをコピーしません。

実施例

74
Sebsemillia

動的なコンテンツがある場合、これは苦痛になります。私はこれを使用して、正しい高さを確認してからスクロールしました：

$('#modal').on('shown.bs.modal', function () {
  $('.modal-dialog').css('height', $('.modal-dialog').height() );
});

$('#modal').on('hidden.bs.modal', function () {
  $('.modal-dialog').css('height', 'auto');
});
2
unclejam

https://github.com/twbs/bootstrap/issues/14916 （「モーダルオーバーレイはスクロールバーの上にある」）を説明しているようです。これはBootstrap v3で修正されます.3.1 by https://github.com/twbs/bootstrap/pull/14927 （「モーダルのスクロールバーにオーバーレイするモーダル背景を修正する」）。

0
cvrebert