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. Java异常简介

    异常指异于常态,和正常情况不一样,有错误出现.阻止当前方法或作用域执行的问题,称之为异常. Java中所有的与异常有关的类都继承于Throwable类,Throwable类有两个儿子,一个是Error ...

  2. centos安装sublime

    在官网下载,tarball    下载链接        http://www.sublimetext.com/3 提示信息:  Ubuntu 64 bit - also available as a ...

  3. Servlet页面登录的数据库验证程序(一)

    一.基本思想是MVC模式,一个登录页面login.jsp,一个服务器处理程序Servlet.java,一个MySql数据库userinfo. 另外还有相关的数据封装类User和数据库连接类GetDat ...

  4. 关于python怎样编写登录接口

    把今天的成果展示下,关于怎么用python编写登录接口, 要求是   1.输入用户名和密码 2.输错三次密码就锁定用户 3.认证成功后输出欢迎信息 账号文件内容如下: sanjiang sanjian ...

  5. multipath test

    [root@rac02 mnt]# multipath -llmpathb (36005076300810df6f800000000000005) dm-3 IBM,2145size=50G feat ...

  6. select 触发事件

    需求:现在需要获取用户选择的选项,同时获取里面自定义的字段. 因为option没法设置事件 <select class="form-control js-example-basic-s ...

  7. netty研究【1】:编译源代码

    netty作为异步通信底层框架,其优异的性能让我产生了研究他的源码的决定. 代码研究之前,第一步就是要准备环境,至少可以编译通过,下面,就拿github上的4.1分支进行.我的IDE是Intellij ...

  8. web三种跨域请求数据方法

    以下测试代码使用php,浏览器测试使用IE9,chrome,firefox,safari <!DOCTYPE HTML> <html> <head>     < ...

  9. TIOBE Index for January 2016(转载)

    Java has won the TIOBE Index programming language award of the year. This is because Java has the la ...

  10. navicat连接My SQL时忘记root密码处理方法

    前端时间安装完My SQL5.6以后很长时间没用过,用navicat连接时有错误提示 应该是密码错误了,但是忘记了root的密码. 在网上找了很久,终于找到修改root密码的方法并修改成功. 1. 关 ...