我正在尝试找到一种增加引导模式高度的解决方法。我确实在模态体中尝试了最大的修复方式,但是如果它变得过大则只会切断我的模态。我试图找到一种方法使它像modal工作在pinterest上一样工作。
当模态打开时,我已经禁用了主页面主体滚动。但我在调整尺寸方面遇到了麻烦。
有没有人为此做过任何工作?
我尝试将高度添加到我的模态(高度:95%;)和modal_body(最大高度:75%;),内容溢出父div(模态)
我附上了截图来演示相同的
我最终用pintrest类型的属性制作了自己的模态。 this问题帮助了我很多次
答案 0 :(得分:17)
尝试使用此js计算模态高度:
$(document).ready(function() {
$(".showcomments").click(function() {
$('#myModal').modal('show');
rescale();
});
$("[rel=tooltip]").tooltip();
});
function rescale(){
var size = {width: $(window).width() , height: $(window).height() }
/*CALCULATE SIZE*/
var offset = 20;
var offsetBody = 150;
$('#myModal').css('height', size.height - offset );
$('.modal-body').css('height', size.height - (offset + offsetBody));
$('#myModal').css('top', 0);
}
$(window).bind("resize", rescale);
答案 1 :(得分:2)
使用这个CSS对我很有用:
.my-modal {
width:600px;
height:300px;
.modal-header {
background-color:#ccc;
button {
font-size:30px;
}
}
.modal-body {
overflow-y: hidden;
height: 100%;
max-height:190px;
}
}
更新:我看了你的小提琴。尝试为你的模态添加“高度”。
答案 2 :(得分:1)
引导模式在position: fixed
中打开。这样,无论滚动多少,它都将始终保持在同一个地方。所以你可能看不到它的一部分。如果你想看到模态的其余部分,你需要将它position: absolute
。但问题是它总是会出现在页面顶部。但如果您想了解