bootstrap多层或者多个模态框滚动条使页面抖动问题
2020-05-15 本文已影响0人
竹立荷塘
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B;或者打开模态框A,关闭A后马上打开模态框B,会发现页面有抖动现象。这是因为它隐藏了浏览器滚动条,页面就相当于变宽了,关闭模态窗口后,页面又出现滚动条,页面又变窄了,这一伸一缩就会使页面产生抖动现象。
鉴于以上现象并查看页面代码后,发现主要原因是因为遮罩问题引起的,遮罩切换太快,导致第一个遮罩的关闭后样式还未重置,又开启了一个遮罩。我的解决办法试,将第一个遮罩关闭后,延迟500ms,再打开第二个遮罩。
$('#show-modal-btn2').click(function() {
// 隐藏第一个遮罩
$('#show-modal1').modal('hide');
// 延迟500ms后,打开第二个遮罩
var timer = setTimeout(function() {
$('#show-modal2').modal('show');
clearTimeout(timer);
}, 500);
})