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);
  })

你可能感兴趣的:(bootstrap多层或者多个模态框滚动条使页面抖动问题)