web之家  

问题:在使用Bootstrap时,有时候会用到模态框中再嵌套模态框。这样就会出现一个问题,就是在关闭第二个模态框时,会导致第一个模态框的滚动条消失,这样就会使得屏幕太小而模态框太大看不到底部信息,而没法进行操作。

解决方法:就是在第二个模态框的关闭hide 方法调用之后立即触发的事件中,设置第一个模态框的样式,给其加一个样式:'overflow-y':'scroll'。

代码如下: myModalEdit是第二个模态框的id,myModal是第一个模态框的id

$('#myModalEdit').on('hidden.bs.modal', function() {

$('#myModal').css({'overflow-y':'scroll'});
});

如果bodybody还有滑动框,

//第二个模态框关闭触发事件,给第一个添加css样式
$('#people-selector1').on('hidden.bs.modal', function() {
$('#people-selector').css({'overflow-y':'scroll'});
$(document.body).css({//并取消body的滑动这是因为body还有滑动框
"overflow-y":"hidden"
});
});

不然会有下面的

posted on 2017-07-31 16:03  路修远而求索  阅读(807)  评论(0编辑  收藏  举报