web-dev-qa-db-ja.com

Twitter bootstrapスクロール可能なモーダル

作業中のプロジェクトにTwitter bootstrapを使用しています。

私はそれよりもやや長いフォームを持つモーダルウィンドウを持っていますが、ウィンドウが小さくなりすぎるとモーダルがスクロールしませんでした（スクロールできないページから消えただけの場合）。

これを修正するには、次のCSSを使用しました

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

これはChromeで意図したとおりに機能します（つまり、ウィンドウが十分に大きい場合はフォームはフルサイズですが、ウィンドウが縮小するとモーダルが縮小してスクロール可能になります）。問題は、IEでモーダルが画面から外れていることです。誰もこの問題に対するより良い解決策を持っていますか？

私の例は、tinyhousemap.comで見つけることができます（モーダルを表示するには、ナビゲーションウィンドウで[マップにエントリを追加]をクリックします）

ありがとう

csstwitter-bootstrap
83
Dan dot net

以下の解決策はどうですか？それは私のために働いた。これを試して：

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

詳細：

  1. .modalクラスからoverflow-y: auto;またはoverflow: auto;を削除します（重要）
  2. max-height: 400px;クラスから.modalを削除（重要）
  3. __modal_modal_bodyにmax-height: 400px;を追加します（または、420px以下にすることができますが、450pxを超えることはありません）
  4. overflow-y: auto;を.modal .modal-bodyに追加します

完了、ボディのみがスクロールします。

138
Lijana Saniukaite

JQueryのみを使用して小さなソリューションを作成しました。

最初に、あなたが<div class="modal-body">に追加のクラスを置く必要があります。私は "ativa-scroll"と呼ばれるので、次のようになります：

<div class="modal-body ativa-scroll">

そのため、次のコードをページのJSロードの近くに配置します。

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

私も完璧に対応してくれますし、反応も良いです！ :)

18
Massa
/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

これは、JSコードなしのBootstrap 3で機能し、応答します。

ソース

16
Guillaume Renoult

ブートストラップを試してみてください：

 .modal {
position: fixed;

と：

.modal {
position: absolute;

それは私のために働いた。

8
Dan Baker

私も追加しました

.modal { position: absolute; }

ダイアログをスクロールできるようにスタイルシートに追加しますが、ユーザーが長いページの下部に移動した場合、モーダルは表示領域の上部に隠れてしまいます。

これはbootstrap 3ではもはや問題ではないことを理解していますが、アップグレードするまで比較的迅速な修正を探して、モーダルを開く前に上記に加えて以下を呼び出すことになりました

$('.modal').css('top', $(document).scrollTop() + 50);

FireFox、Chrome、IE10 8および7（私が手にしなければならなかったブラウザ）で満足しているようです

4
abs

.modal-body要素のmax-heightで「vh」​​メトリックを使用することで、これを克服できました。 70vhは私の用途に適しているように見えました。次に、overflow-yをautoに設定して、必要なときにのみスクロールするようにします。

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}
1
Keith.Abramo

あなたのモーダルはfirefoxで隠されています、そしてそれはあなたがあなたの一般的なスタイルシートの中に持っている負のマージン宣言のためです：

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

負のマージンを削除すると、すべて正常に機能します。

1
Andres Ilich

.modal {overflow-y: auto;}を使用する場合、bodyがすでにオーバーフローしているときに、ページの右側に追加のスクロールバーを作成します。

これを回避するには、overflowをbodyタグから一時的に削除し、モーダルoverflow-yをautoに設定します。

例：

$('.myModalSelector').on('show.bs.modal', function () {

        // Store initial body overflow value
        _initial_body_overflow = $('body').css('overflow');

        // Let modal be scrollable
        $(this).css('overflow-y', 'auto');
        $('body').css('overflow', 'hidden');


    }).on('hide.bs.modal', function () {

        // Reverse previous initialization
        $(this).css('overflow-y', 'hidden');
        $('body').css('overflow', _initial_body_overflow);
});
1
Ilia Rostovtsev

@grenoultのCSSソリューション（ほとんどの場合は動作します）の問題は、キーボードがポップアップしたとき（つまり、モーダルダイアログの入力でクリックしたとき）に画面サイズが変化し、モーダルダイアログのサイズが変更され、クリックした入力が非表示になり、入力内容が表示されなくなります。

私にとってより良い解決策は、jqueryを次のように使用することでした。

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

ウィンドウサイズの変更には反応しませんが、とにかくそうなることはあまりありません。

1
dbryson

これはいずれも期待どおりに動作しません。正しい方法は、位置を変更することです。

0
GravyPlaya