58

Bootstrap 3モーダルダイアログを使用して、一種のレスポンシブメガメニューを作成しようとしています. モーダル ウィンドウ全体の幅と高さをビューポートの 80% に設定し、モーダル ボディを最大高さに設定して、大きなビューポートに画面全体が表示されないようにしたいと考えています。

私のHTML：

    <div class="modal fade">
            <div class="modal-dialog modal-megamenu">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                        <h4 class="modal-title">Modal Mega Menu Test</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                        </div>
                    </div>
                </div>
                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-primary">close</button>
                    </div>
             </div>
        </div>

私のCSS：

.modal-megamenu {
    width:80%;
    height:80%;
}

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

これは幅に対して意図したとおりに機能しますが、「高さ」パラメーターでは結果が得られません。そのように、モーダル ウィンドウの高さは常に max-height 値に設定されます。ビューポートの高さに応じて高さを動的に設定する方法を知っている人はいますか?

4

6 に答える 6

84

calcを使用した純粋な CSS ソリューション 

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

200pxはヘッダー＆フッターの高さに応じて調整可能

于 2016-07-29T09:20:08.420 に答える
48

Bass と同様に、overflow-y も設定する必要がありました。それは実際にCSSで行うことができます

$('#myModal').on('show.bs.modal', function () {
    $('.modal .modal-body').css('overflow-y', 'auto'); 
    $('.modal .modal-body').css('max-height', $(window).height() * 0.7);
});
于 2014-05-06T20:49:55.320 に答える
31

試す：

$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('height',$( window ).height()*0.8);
});
于 2013-11-18T20:46:19.310 に答える
5

Ryandの答えを拡張するには、Bootstrap.uiを使用している場合、モーダルインスタンスでこれを行うとうまくいきます：

    modalInstance.rendered.then(function (result) {
        $('.modal .modal-body').css('overflow-y', 'auto'); 
        $('.modal .modal-body').css('max-height', $(window).height() * 0.7);
        $('.modal .modal-body').css('height', $(window).height() * 0.7);
    });
于 2016-03-17T17:39:19.850 に答える