58

我正在尝试使用 Bootstrap 3 模态对话框创建一种响应式 megamenu。我想将整个模态窗口的宽度和高度设置为视口的 80%，同时将 modal-body 设置为最大高度，以免在大视口上填充整个屏幕。

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

这适用于宽度，但“高度”参数没有给出任何结果。像这样，模态窗口的高度总是设置为最大高度值。有人知道如何根据视口高度动态设置高度吗？

4

6 回答 6

84

纯 CSS 解决方案，使用calc 

.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 回答
0

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.

于 2017-07-19T11:30:31.703 回答
0

我为此使用jquery。我做了一个函数来为模态设置所需的高度（你可以根据你的要求改变它）。然后我使用 Modal Shown 事件来调用这个函数。 记住不要使用，$("#modal").show()而是使用，$("#modal").modal('show')否则显示的.bs.modal 将不会被触发。

这就是我在这种情况下所拥有的一切。

var offset=250; //You can set offset accordingly based on your UI
function AdjustPopup() 
{
    $(".modal-body").css("height","auto");
    if ($(".modal-body:visible").height() > ($(window).height() - offset)) 
    {
        $(".modal-body:visible").css("height", ($(window).height() - offset));
    }
}
//Execute the function on every trigger on show() event.
$(document).ready(function(){
$('.modal').on('shown.bs.modal', function (e) {
        AdjustPopup();
    });
});
//Remember to show modal like this
$("#MyModal").modal('show');

于 2020-01-22T07:08:33.327 回答