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. HBase和MongoDB的区别

    Mongodb用于存储非结构化数据,尤其擅长存储json格式的数据.存储的量大概在10亿级别,再往上性能就下降了,除非另外分库.Hbase是架构在hdfs上的列式存储,擅长rowkey的快速查询,但模 ...

  2. 问题1——之Linux虚拟机ip地址消失

    原文转自 https://blog.csdn.net/keep_walk/article/details/75115926 以前一直通过ifconfig命令查看ip地址,但是今天用XShell连接自己 ...

  3. Django 修改视图文件(views.py)并加载Django模块 + 利用render_to_response()简化加载模块 +locals()

    修改视图代码,让它使用 Django 模板加载功能而不是对模板路径硬编码.返回 current_datetime 视图,进行如下修改: from django.template.loader impo ...

  4. 每天跟着书敲Mysql

    要深入学下Mysql操作啦 CRUD,create,retrieve,update,delete

  5. 7.2 GRASP原则二:信息专家 Information Expert

    2.GRASP原则二:信息专家 Information Expert  What is a general principle of assigning responsibility to obje ...

  6. 机器学习 之KNN近邻法

    目录 1.KNN近邻法 1.KNN近邻法 KNN模型由三个基本要素决定: 距离度量:其中欧式距离一般误差最小,\(x_{i} 和 x_{j}\)为两个样本点:\[L_{2}(x_{i}, x_{j}) ...

  7. 2018普及组摆渡车洛谷5017(dp做法)

    啦啦啦,这一篇是接上一篇的博客,上一篇是记忆化搜索,而这一篇是dp+前缀和小技巧 dp这种玄学做法我这种蒟蒻当然不是自己想出来的,参考https://blog.csdn.net/kkkksc03/ar ...

  8. android:Internet(volley)

    public void getStringFromCloud(View view) { /*创建请求队列*/ RequestQueue queue = Volley.newRequestQueue(t ...

  9. hello2部分代码解析

    /** * Copyright (c) 2014 Oracle and/or its affiliates. All rights reserved.** You may not modify, us ...

  10. excel中如何把文本转换为数字

     今天被一个小问题难住了,本人用自己开发的成绩分析软件统计学校成绩,数据由excel导入,给我的数据全部是文本型,其实也不难,主要是我的软件是早期开发的,没有考虑这个问题,结果这个问题被美女老师解决了 ...