Android上的Bootstrap 3长模式滚动背景
我有一个很长的模式,它不能在我的android移动设备上完全显示,按钮在屏幕底部,模式根本不会滚动,但模式后面的灰色背景会滚动,是否有任何css/js技巧可以锁定背景,并允许模式在显示此模式时滚动?这本应在Bootstrap 3中修复,但它对我不起作用。我能够通过-webkit溢出滚动CSS属性和设置模态的最大高度来修复wit。因为我想让我的模式填满整个屏幕,所以我必须连接一些javascript来检测移动设备,并将.modal内容的最大高度设置为设备的视口高度 下面是我使用一个名为jRespond的库来解决这个问题的方法: 将此CSS添加到您的模态中Android上的Bootstrap 3长模式滚动背景,android,scroll,modal-dialog,twitter-bootstrap-3,Android,Scroll,Modal Dialog,Twitter Bootstrap 3,我有一个很长的模式,它不能在我的android移动设备上完全显示,按钮在屏幕底部,模式根本不会滚动,但模式后面的灰色背景会滚动,是否有任何css/js技巧可以锁定背景,并允许模式在显示此模式时滚动?这本应在Bootstrap 3中修复,但它对我不起作用。我能够通过-webkit溢出滚动CSS属性和设置模态的最大高度来修复wit。因为我想让我的模式填满整个屏幕,所以我必须连接一些javascript来检测移动设备,并将.modal内容的最大高度设置为设备的视口高度 下面是我使用一个名为jRespo
@media (max-width: $screen-xs-max) {
.modal-dialog {
.modal-content {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
}
}
}
将jRespond添加到应用程序中
将以下代码添加到main.js脚本中
/* This code handles the responsive modal for mobile */
var jRes = jRespond([{
label: 'handheld',
enter: 0,
exit: 767
}]);
jRes.addFunc({
breakpoint: 'handheld',
enter: function() {
$('.modal-content').css('max-height', $(window).height());
$(window).on('orientationchange', function () {
$('.modal-content').css('max-height', $(window).height());
});
},
exit: function () {
$('.modal-content').css('max-height', "");
$(window).off('orientationchange');
}
});
这可能是因为模态类的位置是固定的。。。 试着把下面的代码放到你的css文件中,这对我来说很有用
@media (max-width: 767px) {
.modal {
position: absolute;
overflow:visible;
}
.modal-open {
overflow:visible;
}
}