bootstrap多层或者多个模态框滚动条使页面抖动问题

  在使用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);
  })

本人前端程序员，长期混迹于各种前端开发中，现在专门为前端热爱者建了个微信群，和大家一起分享自己在工作、学习中遇到的技术知识或问题，还有各种资料和课程，各位感兴趣的可以加入哦~