bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法:

在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem):

body{

padding: $paddingSize !important;

}

这样在没有滚动条的情况下解决了。页面有滚动条的情况下页面还是会缩放。

原理是弹出时,bootstrap 给body上加了modal-open这个样式。

.modal-open的代码如下:

.modal-open {
  overflow: hidden;
}

这样的好处是,弹缩后页面隐藏滚动条,让无法滚动。

如果重写:

.modal-open {
  overflow: auto !important;
}
可以不缩放页面,但是页面在有弹窗的时候还会存在滚动条。
 
看自己如何取舍了。

bootstrap弹出模态框会给body加padding的解决方法的更多相关文章

  1. bootstrap弹出模态框

    (1)引入jquery, bootstrap相关的 jquery下载地址: https://jquery.com/download/ bootstrap下载地址: https://v3.bootcss ...

  2. 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页(二)前端修改、添加表格行点击弹出模态框

    在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...

  3. Ajax发送请求等待时弹出模态框等待提示

    主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...

  4. JavaScript:用JS实现加载页面前弹出模态框

    用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...

  5. bootstrap模态框动态赋值, ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框(JS)

    /查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...

  6. bootstrap-table:操作栏点击编辑按钮弹出模态框修改数据

    核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...

  7. jQuery点击弹出层,弹出模态框,点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  8. yii 页面加载完成后弹出模态框

    <?php $js = <<<JS $('#page-modal').modal('show');//页面加载完显示模态框 $('.modal-dialog').css('wi ...

  9. 关于系统弹出错误:429 , ActiveX 部件不能创建对象 的解决方法

    例如:win7 win10的系统,有时候运行某些软件会出现:429 , ActiveX 部件不能创建对象 的情况. 提示: "运行时错误'429': ActiveX 部件不能创建对象&quo ...

随机推荐

  1. pagex/y offsetx/y screenx/y clientx/y 用法及区别

    1  pagex/pagey:鼠标相对于整个页面的x/y坐标 注:整个页面的意思就是你整个页面的全部 例如:宽200px 高400px 那么pagex/y他们最大值就是它 2,offsetX/y与pa ...

  2. 函数式语言简介(functional language)

    1.什么是函数式语言?        是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分是原始函数.定义函数和函数型.这种语言具有较强的组织数据结构的能力,可以把某一数据结构(如数组)作为单一值处 ...

  3. CentOS7.5下安装Python3.7 --python3

    1.将本地安装包上传到远程主机上 scp Python-3.7.0.tgz root@123.206.74.24:/root 2.扩展 安装Python之前安装Python相关的依赖包(主要是u红色部 ...

  4. Flask离线文档 --技术文档

    1.预览 2.文档下载 链接:Flask离线文档下载(v1.0.10)提取码:0x0x 

  5. Petrozavodsk Winter Camp, Day 8, 2014, Mosaic

    给你三个数字a,b,c,让你用1-m的数字凑出来 结论:有2个1和2个2肯定凑不出来,然后就搜索 #include <bits/stdc++.h> using namespace std; ...

  6. Spring Security Oauth2 单点登录案例实现和执行流程剖析

    Spring Security Oauth2 OAuth是一个关于授权的开放网络标准,在全世界得到的广泛的应用,目前是2.0的版本.OAuth2在“客户端”与“服务提供商”之间,设置了一个授权层(au ...

  7. Mysql怎么判断繁忙 checkpoint机制 innodb的主要参数

    Mysql怎么判断繁忙,innodb的主要参数,checkpoint机制,show engine innodb status   2018年07月13日 15:45:36 anzhen0429 阅读数 ...

  8. mysql 在 win 安装 最全攻略(附转载的乱码终极解决方案)以及解决data too long for column 'name' at row 1, 一种可能就是因为编码一致性问题.

    [博客园cnblogs笔者m-yb原创,转载请加链接,公众号aandb7, github.com/mayangbo666,QQ群927113708] https://www.cnblogs.com/m ...

  9. JavaScript之作用域

    1. 作用域 变量能够起作用的范围,作用域分为全局作用域和局部作用域 全局作用域: 1. 最外层函数或者在最外层函数外通过var定义的变量: 2. window对象的属性和方法具有全局作用域: 3. ...

  10. 关于Idea启动配置tomcat

    1.打开file中setting中搜索Application Servers,如下图 2.添加服务器类型,例如tomcat,如下图,添加完成之后可以选定tomcat的目录,tomcat Home配置t ...