大佬教程收集整理的这篇文章主要介绍了解决Bootstrap模态框切换时页面抖动 or页面滚动条,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下:
当Modal显示时,设置body -- overflow:hidden;margin-right:15px;(设置15px是因为浏览器的滚动条占位是15px);(通过在modal显示时给body添加.modal-open类实现)
设置modal -- overflow:auto;overflow-y:scroll;
这样设置的效果是:
(1)当页面内容超出(即页面本身存在滚动条),则moda弹出后,原body滚动禁止,body的margin-right和modal的滚动条位置重叠,此时页面是不会出现抖动现象的;
(2)当页面内容未超出(即页面本身不存在滚动条),则modal弹出后,由于body设置了margin-right,会使得页面向左偏移,当modal关闭后,body的margin-right为0,页面向右偏移,就出现页面抖动。
根据scrollHeight和clientHeight,分别在modal加载前和关闭时调整body的overflow、margin-right和.modal的overflow属性,以覆盖bootstrap.css中的样式
函数如下:
Modal.prototype.adjustBody_beforeShow =@R_135_3816@(){ var body_scrollHeight = $('body')[0].scrollHeight; var docHeight = document.documentElement.clientHeight; if(body_scrollHeight > docHeight){ $('body').css({ 'overflow' : 'hidden', 'margin-right' : '15px' }); $('.modal').css({'overflow-y':'scroll'}) }else{ $('body').css({ 'overflow' : 'auto', 'margin-right' : '0' }); $('.modal').css({'overflow-y':'auto'}) } } Modal.prototype.adjustBody_afterShow =@R_135_3816@(){ var body_scrollHeight = $('body')[0].scrollHeight; var docHeight = document.documentElement.clientHeight; if(body_scrollHeight > docHeight){ $('body').css({ 'overflow' : 'auto', 'margin-right' : '0' }); }else{ $('body').css({ 'overflow' : 'auto', 'margin-right' : '0' }); } }
Modal.prototype.show =@R_135_3816@ (_relatedTarget) { this.adjustBody_beforeShow(); //...other code } Modal.prototype.hide =@R_135_3816@ (E) { this.adjustBody_afterShow(); //...other code }
但我是这样用的:
(function() { var Modal = {}; //@L_981_21@modal弹出时页面左右移动问题 Modal.adjustBody_beforeShow =@R_135_3816@(){ var body_scrollHeight = $('body')[0].scrollHeight; var docHeight = document.documentElement.clientHeight; if(body_scrollHeight > docHeight){ $('body').css({ 'overflow' : 'hidden', 'margin-right' : '15px' }); $('.modal').css({'overflow-y':'scroll'}) }else{ $('body').css({ 'overflow' : 'auto', 'margin-right' : '0' }); $('.modal').css({'overflow-y':'auto'}) } } Modal.adjustBody_afterShow =@R_135_3816@(){ var body_scrollHeight = $('body')[0].scrollHeight; var docHeight = document.documentElement.clientHeight; if(body_scrollHeight > docHeight){ $('body').css({ 'overflow' : 'auto', 'margin-right' : '0' }); }else{ $('body').css({ 'overflow' : 'auto', 'margin-right' : '0' }); } } $('#addAppModal').modal('hide'); $('#addAppModal').on('show.bs.modal',@R_135_3816@ (event) { Modal.adjustBody_beforeShow(); }); $('#addAppModal').on('hidden.bs.modal',@R_135_3816@ (event) { Modal.adjustBody_afterShow(); }); })();
最佳的办法应该是CSS: 引用@僵叔叔的答案:body{ overflow: auto !important;} .modal{ overflow: auto !important;}
以上是大佬教程为你收集整理的解决Bootstrap模态框切换时页面抖动 or页面滚动条全部内容,希望文章能够帮你解决解决Bootstrap模态框切换时页面抖动 or页面滚动条所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。