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. Rancher2.0中邮件通知的设置

    1-邮件通知的设置-中国电信189邮箱 2-2-邮件通知的设置-腾讯免费企业邮箱 **说明:网易163邮箱.QQ邮箱没有设置成功,可能是因为邮箱设置得太安全的缘故.   参考链接: 中国电信189邮箱 ...

  2. maven打包时出现 Failed to execute goal org.apache.maven.plugins:maven-install-plugin:2.4:install (default-install) on project……

    maven在打包时只会默认打jar包,而那些xml等配置文件默认不打包进去的,这样的话在mybatis的配置使用中就有问题了. 要自己配置后手动打包才能将xml文件也纳入打包的范围,配置后打包发现出现 ...

  3. 整合SpringData JPA

    ORM(Object Relational Mapping): 1).编写一个实体类(bean)和数据表进行映射,并且配置好映射关系: //使用JPA注解配置映射关系 @Entity //告诉JPA这 ...

  4. React文档(十四)深入JSX

    根本上,JSX只是为React.createElement(component, props, ...children)函数提供语法糖.JSX代码是这样的: <MyButton color=&q ...

  5. 946. Validate Stack Sequences验证栈序列

    网址:https://leetcode.com/problems/validate-stack-sequences/ 参考:https://leetcode.com/problems/validate ...

  6. Yii框架实现restful 接口调用,增删改查

    创建模块modules; 在main.php中配置文件:(1) (2)控制器层: namespace frontend\modules\v1\controllers;use frontend\modu ...

  7. c# 转换成时间类型

    if (rngFound.Value.ToString().Contains("/")) { closingdate = rngFound.Value; } else if (rn ...

  8. 把旧系统迁移到.Net Core 2.0 日记 (19) --UI转用adminLTE

    之前用JEasyUI,它的datagrid比较强大,但region的布局界面就太简陋了. 把布局界面改成adminLTE 左边菜单要做成动态,从xml文件加载, 可以参考NOPCommerce的源码来 ...

  9. 负载均衡----实现配置篇(Nginx)

    同类文章:负载均衡----概念认识篇 吐槽:自从那篇“探讨负载均衡”那篇文章被博客园吐槽后,心里极度不平衡,思来想去还是把名字改成“负载均衡----概念认识篇”,再加多几篇文章来诠释上篇文章的精华所在 ...

  10. RAID的详细配置

    一.RAID 1.RAID机制通过使用多硬盘并行工作的方式来提高硬盘的IO性能 2.RAID分为多种,称之为RAID level,RAID共有7级:RAID0~RAID6 3.常用的RAID级别有:R ...