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

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

作者: 竹立荷塘 | 来源:发表于2020-05-15 17:30 被阅读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);
      })
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/nvdcohtx.html