Bootstrap 3-화면 크기에 따라 모달 창의 높이 설정

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;
}

이것은 너비에 대해 의도 한대로 작동하지만 "height"매개 변수는 결과를 제공하지 않습니다. 이와 같이 모달 창의 높이는 항상 최대 높이 값으로 설정됩니다. 뷰포트 높이에 따라 동적으로 높이를 설정하는 방법에 대한 아이디어가 있습니까?

---

계산을 사용하는 순수 CSS 솔루션

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

머리글 및 바닥 글 높이에 따라 200px 조정 가능

---

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);
});

---

시험:

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

---

To expand on Ryand's answer, if you're using Bootstrap.ui, this on your modal-instance will do the trick:

    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);
    });

---

I assume you want to make modal use as much screen space as possible on phones. I've made a plugin to fix this UX problem of Bootstrap modals on mobile phones, you can check it out here - https://github.com/keaukraine/bootstrap-fs-modal

All you will need to do is to apply modal-fullscreen class and it will act similar to native screens of iOS/Android.

ReferenceURL : https://stackoverflow.com/questions/19140702/bootstrap-3-set-height-of-modal-window-according-to-screen-size