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

前端之家收集整理的这篇文章主要介绍了jquery – Bootstrap 3 – 根据屏幕大小设置模态窗口的高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图创建一种响应的megamenu使用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”参数没有给出任何结果。像这样,模态窗口的高度总是设置为max-height值。任何人都有一个想法如何根据视口高度动态设置高度?

解决方法

类似于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);
});

猜你在找的jQuery相关文章