Bootstrap3-技巧之解决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弹出时页面左右移动问题
Modal.prototype.adjustBody_beforeShow = function(){
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 = function(){
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 = function (_relatedTarget) {
this.adjustBody_beforeShow();
//...other code
} Modal.prototype.hide = function (e) {
this.adjustBody_afterShow();
//...other code
}
Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条的更多相关文章
- 解决Bootstrap模态框切换时页面抖动 or页面滚动条
Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...
- 黄聪:解决Bootstrap模态框(modal)弹出后页面跑到顶部的办法
bootstrap 3.1.1 版本解决方案: body.modal-open { position: absolute !important; }
- 解决bootstrap模态框内输入框无法获取焦点
bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可
- 完美解决bootstrap模态框允许拖动后拖出边界的问题
使用bootstrap3版本 在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法 1.下载并引入jquery-ui插件 2.全局添加模态框允许拖动事件 $(docume ...
- (转)解决bootstrap 模态框的页面抖动
使用bootstrap时,往往会出现页面抖动的效果,使得用户体验十分不友好. Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置bod ...
- 解决bootstrap模态框居中问题
完美解决办法: 在bootstrap.js或bootstrap.min.js文件中找到Modal.prototype.show方法. 在that.$element.addClass('in').att ...
- 解决bootstrap 模态框 数据清除 验证清空
$("#switchModel").on("hidden.bs.modal", function () { $('#ware-form')[0].reset() ...
- bootstrap模态框显示时被遮罩层遮住了
<style>.modal-backdrop{z-index:0;}</style>
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
随机推荐
- SpringMVC,3种不同的URL路由配置方法
1. 先说说一种比较常见的: <servlet> <servlet-name>theDispatcher</servlet-name> <servlet-cl ...
- 玩转github----1
1.svn和github的区别 svn:集成式:我们在多人开发一个项目的时候我们需要准备一个中央服务器,然后每一个人都要通过这个中央服务器进行代码的一个获取和代码的一个提交,所以说这个所有的版本控制和 ...
- MyEclipse黑色主题
第一步:打开链接http://www.eclipsecolorthemes.org/选中一款:下载其中的epf格式. 如图: 在eclipse中打开:file > import > Gen ...
- 【转载】ANSYS 动力分析 (9) - 瞬态动力分析 (1)
原文地址:http://htbbzzg.blog.163.com/blog/static/69725206201081663611208/ 第四章 瞬态动力分析 第一节:瞬态动力分析的定义和目的 ...
- Unity 脚本生命周期流程图
渲染 OnPreCull: 在相机剔除场景之前调用此函数.相机可见的对象取决于剔除.OnPreCull 函数调用发生在剔除之前. OnBecameVisible/OnBecameInvisible: ...
- oracle case when
http://www.cnblogs.com/kevin2013/archive/2010/07/02/1769682.html
- CSS 选择器(转)
原文转自:http://www.cnblogs.com/xyzhanjiang/p/5447406.html CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 C ...
- C# 获取当前操作系统是32位还是64位
注:判断整型的长度的方式,只有在AnyCPU编译模式下才有用.因此更好的办法是获取真的地址总线位宽(使用WMI,windows management instruementation). .NET 2 ...
- Python 面向对象2
静态方法 静态方法相当于函数,可以不创建对象直接引用 如果在类里面用静态方法,相当于函数,可以不创建对象,直接是用类里面的方法,你就当它是函数. 静态方法名义上归类管理,实际上静态方法访问不了类或实例 ...
- Java中的队列Queue,优先级队列PriorityQueue
队列Queue 在java5中新增加了java.util.Queue接口,用以支持队列的常见操作.该接口扩展了java.util.Collection接口. Queue使用时要尽量避免Collecti ...