it-swarm.com.ru

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

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

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

47
Ralf Glaser

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

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

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

65
Dan Key

Как и в случае с басами, мне также пришлось установить переполнение-у. Это действительно может быть сделано в CSS

$('#myModal').on('show.bs.modal', function () {
    $('.modal .modal-body').css('overflow-y', 'auto'); 
    $('.modal .modal-body').css('max-height', $(window).height() * 0.7);
});
44
Ryand.Johnson

Пытаться:

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

Чтобы расширить ответ Райанда, если вы используете 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
Tiago

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

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

0
keaukraine