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页面滚动条的更多相关文章

  1. 解决Bootstrap模态框切换时页面抖动 or页面滚动条

    Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...

  2. 黄聪:解决Bootstrap模态框(modal)弹出后页面跑到顶部的办法

    bootstrap 3.1.1 版本解决方案: body.modal-open { position: absolute !important; }

  3. 解决bootstrap模态框内输入框无法获取焦点

    bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可

  4. 完美解决bootstrap模态框允许拖动后拖出边界的问题

    使用bootstrap3版本 在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法 1.下载并引入jquery-ui插件 2.全局添加模态框允许拖动事件 $(docume ...

  5. (转)解决bootstrap 模态框的页面抖动

    使用bootstrap时,往往会出现页面抖动的效果,使得用户体验十分不友好. Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置bod ...

  6. 解决bootstrap模态框居中问题

    完美解决办法: 在bootstrap.js或bootstrap.min.js文件中找到Modal.prototype.show方法. 在that.$element.addClass('in').att ...

  7. 解决bootstrap 模态框 数据清除 验证清空

    $("#switchModel").on("hidden.bs.modal", function () { $('#ware-form')[0].reset() ...

  8. bootstrap模态框显示时被遮罩层遮住了

    <style>.modal-backdrop{z-index:0;}</style>

  9. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

随机推荐

  1. HTML CSS中比较重要的

    在网页中有了HTML和CSS之后,我们还需要学会布局,我们可以将整个网页看做是一个DIV,然后将所有内容放入到这个DIV中. 内容中的每一块我们都可以用DIV包起来,我们将这个DIV看做一个盒子,然后 ...

  2. 数论 UVALive 2756

    这道题目考察的n个不同的数环形排列,每次相邻两个数交换位置,这样由正序转变成逆序所需操作的最小次数t. 公式:环形排列:t= n/2*(n/2 - 1)/2 + (n+1)/2* ((n+1)/2 - ...

  3. 百度地图helloworld程序问题

    按照百度开发者平台[http://developer.baidu.com/map/index.php?title=androidsdk/guide/retrieval]的开发指南,完整编写代码ok之后 ...

  4. linux软连接和硬链接

    1.软连接(符号连接)创建方法(相当于windows的快捷方式) # ln -s 原文件 连接文件(最好使用绝对路径) 特点: 1.软连接文件是777的权限,而且很小很小: 2.可以跨分区(文件系统) ...

  5. 修复PHP在64位下序列化(serialize)的字符串在32位机器下反序列

    32机器下PHP 整型数值的范围最大不超过2147483647,而有些超出范围的数值在64序列化好的数据标识为整型,在反序列时就可能会出错. 尝试使用以下的办法可以修复此问题 function int ...

  6. PetaPoco ORM 增加返回DataTable的方法

    public DataTable ExecuteDataTable(Sql sql) { return ExecuteDataTable(sql.SQL, sql.Arguments); } publ ...

  7. 基于XML的AOP配置-转

    http://www.cnblogs.com/yangy608/archive/2010/11/14/1876839.html AOP(Aspect-Oriented Programming,面向切面 ...

  8. 如何用BarTender批量打印标签

    关于使用BarTender条码打印软件打印标签,很多小伙伴最关心的问题之一,莫过于如何实现BarTender批量打印标签.为了提高日常标签打印速度,为了方便快捷,也为了减少出错率,快来跟小编学习学习吧 ...

  9. BaiduTemplate模板引擎使用示例附源码

    1.新建项目,asp.net 空Web应用程序 添加data,js,styles,templates文件夹,添加baiduTemplate.js,jquery.js,bootstrap.css 2.添 ...

  10. 消息摘要算法-MAC算法系列

    一.简述 mac(Message Authentication Code,消息认证码算法)是含有密钥散列函数算法,兼容了MD和SHA算法的特性,并在此基础上加上了密钥.因此MAC算法也经常被称作HMA ...