我试图创建一种响应的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); });