bootstrap打开模态modal窗口引起页面抖动闪黑
2017-10-28 11:40
627 查看
在使用bootstrap的modal模态窗口组件时,触发后会发现页面有抖动现象。这是因为它隐藏了浏览器滚动条,页面就相当于变宽了,关闭模态窗口后,页面又出现滚动条,页面又变窄了,这一伸一缩就会使页面产生抖动现象。我的解决方法很简单,就是干掉隐藏滚动条的代码。总共删除bootstrap.js文件中6行代码就可以了。
以bootstrap3.3.6版本中未压缩的bootstrap.js文件为例。
第一处在971行左右,删除这3句
this.checkScrollbar()
this.setScrollbar()
this.$body.addClass('modal-open')
第二处1081行左右,也删除3句
that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar()
这样就好了。都是写无关紧要的代码,给body加内边距的,不会影响其他组件的运行。
以bootstrap3.3.6版本中未压缩的bootstrap.js文件为例。
第一处在971行左右,删除这3句
this.checkScrollbar()
this.setScrollbar()
this.$body.addClass('modal-open')
第二处1081行左右,也删除3句
that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar()
这样就好了。都是写无关紧要的代码,给body加内边距的,不会影响其他组件的运行。
相关文章推荐
- bootstrap打开模态modal窗口引起页面抖动解决办法
- bootstrap在iframe框架中实现由子页面在顶级页面打开模态框(modal)
- 解决Bootstrap模态窗口Modal中使用Kindeditor或UEditor编辑器 点击关闭弹窗 出现第二次无法加载的问题
- 解决bootstrap中模态框打开时页面发生一瞬间移动
- 解决Bootstrap模态窗口Modal中使用Kindeditor或UEditor编辑器第二次无法加载的问题
- 解决打开bootstrap模态框抖动问题
- 在模态窗口中打开水晶报表页面时出现异常
- 解决Bootstrap模态窗口Modal中使用Kindeditor或UEditor编辑器第二次无法加载的问题
- Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框
- window.showModalDialog打开模态窗口父子页面间对话 .
- window.showModalDialog打开模态窗口父子页面间对话
- 解决bootstrap中模态框显示后页面抖动的问题
- 模态窗口提交请求时禁止在新窗口打开页面的处理方法
- bootstrap模态框之加载页面至modal-boby
- 关于showmodaldialog 打开新窗口后提交表单操作时,避免弹出新窗口和避免从后台获取“新数据”后不能刷新当前模态页面的解决方案
- 模态窗口中提交表单时总在新窗口打开的解决办法
- 在winform中使用webbrowser控件时,不弹出新的页面,只在当前窗口打开
- Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条
- 模态窗口打开新窗口问题
- 打开页面时自动弹出窗口询问是否设为首页