Twitterブートストラップスクロール可能モーダル

作業中のプロジェクトにTwitterブートストラップを使用しています。

やや長いフォームのモーダルウィンドウがありますが、ウィンドウが小さくなりすぎたときにモーダルがスクロールしませんでした（スクロールできないページから消えた場合）。

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

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

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

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

ありがとう

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

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

詳細：

1. .modalクラスからoverflow-y: auto;または削除するoverflow: auto;（重要）
2. クラスmax-height: 400px;から削除.modal（重要）
3. max-height: 400px;.modal .modal-bodyに追加します（または、420px以下の場合もありますが、それ以上になることはありません450px）
4. 追加overflow-y: auto;します.modal .modal-body

完了しました。本体のみがスクロールします。

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

私は私のために完璧に働きます、そしてまた敏感な方法で！:)

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

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

ソース

ブートストラップをオーバーライドしてみてください。

 .modal {
position: fixed;

と：

.modal {
position: absolute;

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

私も追加しました

.modal { position: absolute; }

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

これはブートストラップ3の問題ではなくなったことを理解していますが、アップグレードするまで比較的迅速な修正を探していたので、モーダルを開く前に上記に加えて次のように呼び出しました。

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

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

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

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

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

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

この回避策は、bodyタグからオーバーフローを一時的に削除し、モーダルオーバーフロー-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);
});

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

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

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

ウィンドウサイズの変更には反応しませんが、とにかくそれほど頻繁には起こりません。

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

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

これはどれも期待どおりに機能しません。正しい方法は、位置を変更することです：位置に固定：.modalクラスの絶対値