在使用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);
})
网友评论