Question

我正在尝试使用Bootstrap 3模态对话框创建一种响应式megamenu。我想将整个模态窗口的宽度和高度设置为视口的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”参数不会给出任何结果。像这样，模态窗口的高度始终设置为max-height值。有没有人知道如何根据视口高度动态设置高度？

Answer 1

纯CSS解决方案，使用calc

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

200px可以根据标题的高度进行调整。页脚

Answer 2

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

Answer 3

尝试：

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

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

Answer 5

我假设您希望在手机上尽可能多地使用模式屏幕空间。我已经制作了一个插件来修复手机上的Bootstrap模式的UX问题，你可以在这里查看 - https://github.com/keaukraine/bootstrap-fs-modal

您需要做的只是应用modal-fullscreen课程，它的行为类似于iOS / Android的原生屏幕。

Answer 6

我正在为此使用jquery。我疯了一个功能，以设置所需的模态高度（您可以根据需要更改它）。然后，我使用Modal Shown事件来调用此函数。 请记住不要使用result = [] for i in range(color_id): result.append(colors_full_list[i]['name']) print(result)，而应使用$("#modal").show()，否则显示。bs.modal将不会被触发。

在这种情况下，我拥有的一切。

$("#modal").modal('show')

Bootstrap 3 - 根据屏幕尺寸设置模态窗口的高度

6 个答案: