Bootstrap 3 - установка высоты модального окна в зависимости от размера экрана

Я пытаюсь создать своего рода отзывчивый megamenu с использованием модального диалога 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;
}

Это работает в соответствии с шириной, но параметр "высота" не дает никакого результата. Таким образом, высота модального окна всегда устанавливается на значение максимальной высоты. Кто-нибудь знает, как установить высоту динамически в соответствии с высотой видового экрана?

Ответ 1

Подобно Bass, мне также нужно было установить переполнение-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);
});

Ответ 2

Try:

$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('height',$( window ).height()*0.8);
});

Ответ 3

Чистое решение CSS, используя calc

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

200px можно настроить в соответствии с высотой верхнего и нижнего колонтитула

Ответ 4

Чтобы развернуть ответ 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);
    });

Ответ 5

Я предполагаю, что вы хотите сделать модальное использование как можно большего количества экранов на телефонах. Я создал плагин для исправления этой проблемы UX модов Bootstrap на мобильных телефонах, вы можете проверить это здесь - https://github.com/keaukraine/bootstrap-fs-modal p >

Все, что вам нужно сделать, это применить класс modal-fullscreen, и он будет действовать аналогично собственным экранам iOS/Android.