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

Question

我正在尝试使用Bootstrap 3模态对话框创建一种响应式超级菜单。我希望将整个模态窗口的宽度和高度设置为视口的80％，同时设置modal-body的max-height以避免在大型视口上填充整个屏幕。

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

这个宽度参数可以正常工作，但是“高度”参数没有效果。因此，模态窗口的高度总是设置为最大高度值。有人知道如何根据视口高度动态设置高度吗？

- Ralf Glaser

---

我假设你正在寻找类似于这个的东西 -> http://jsfiddle.net/KanvL/1/ - Morpheus

请参阅：https://dev59.com/uZDea4cB1Zd3GeqPYC-g#65199651 - Billu

Answer 1

使用 calc，纯 CSS 解决方案

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

根据头部和底部的高度，200px 可能会被调整。

- Daniel Garmoshka

---

非常好的答案，完美地运作。只需记得检查浏览器支持情况（http://caniuse.com/#search=calc），并非所有版本都支持它。 - Backer

我认为，这个答案基于2年前的这篇原始帖子。 - Jorge Casariego

这么长时间以来，我一直在使用JS编写窗口调整监听器，但我压根不知道vh单位的存在。非常感谢！ - Matt

太棒了，解决了我几周以来一直存在的问题，我没有意识到 calc 函数得到了如此广泛的支持。谢谢！ - DibsyJr

最佳解决方案。谢谢。 - Biswajit Panday

很棒的建议 - ScottG

Answer 2

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

- Ryand.Johnson

---

运行得非常好！谢谢！ - Todor Todorov

Answer 3

尝试:

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

- Bass Jobsen

---

仅作澄清，如果使用.modal('show')命令，这应该放在前面。 - netwire

这是一个不错的解决方案。只要别忘了在内容过大时添加css('overflow', 'auto')。 - Dejan Vasic

您能解释一下为什么使用魔数 0.8 吗？谢谢！ - Renato Gama

由于问题要求：“将整个模态窗口的宽度和高度设置为视口的80％”。使用1表示100％，以此类推。 - Bass Jobsen

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

- Tiago

Answer 5

我正在使用jQuery。我创建了一个函数来设置模态框的所需高度（您可以根据自己的要求进行更改）。 然后我使用了Modal Shown事件来调用此函数。 请记住不要使用$("#modal").show()，而是使用$("#modal").modal('show')，否则shown.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');

- Sibtain

Answer 6

我猜你想在手机上尽可能地利用模态框的屏幕空间。我制作了一个插件来解决 Bootstrap 模态框在移动设备上的用户体验问题，你可以在这里查看 - https://github.com/keaukraine/bootstrap-fs-modal

你只需要应用 modal-fullscreen 类，它就会像 iOS/Android 的本机屏幕一样运行。

- keaukraine