Bootstrap 3 - 根据屏幕尺寸设置模态窗口的高度 [英] Bootstrap 3 - set height of modal window according to screen size

问题描述

我试图使用Bootstrap 3模式对话框创建一种响应式megamenu。我想将整个模态窗口的宽度和高度设置为视口的80％，同时将模态体设置为最大高度，以便不填充大视口上的整个屏幕。

I am trying to create a kind of responsive megamenu using Bootstrap 3 modal dialog. I would like to set the width and height of the whole modal window to 80% of the viewport, while setting the modal-body to a max-height in order not to populate the whole screen on large viewports.

我的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 t给出任何结果。像这样，模态窗口的高度总是设置为max-height值。是否有人知道如何根据视口高度动态设置高度？

This works as intended for the width, but the "height" parameter doesn't give any result. Like that, the height of the modal window is always set to the max-height value. Does anybody have an idea of how to set the height dynamically according to the viewport height?

推荐答案

也设置溢出y。这实际上可以在CSS

Similar to Bass, I had to also set the overflow-y. That could actually be done in the CSS

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

这篇关于Bootstrap 3 - 根据屏幕尺寸设置模态窗口的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！