bootstrap弹出模态框会给body加padding的解决方法
bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法:
在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem):
body{
padding: $paddingSize !important;
}
这样在没有滚动条的情况下解决了。页面有滚动条的情况下页面还是会缩放。
原理是弹出时,bootstrap 给body上加了modal-open这个样式。
.modal-open的代码如下:
这样的好处是,弹缩后页面隐藏滚动条,让无法滚动。
如果重写:
bootstrap弹出模态框会给body加padding的解决方法的更多相关文章
- bootstrap弹出模态框
(1)引入jquery, bootstrap相关的 jquery下载地址: https://jquery.com/download/ bootstrap下载地址: https://v3.bootcss ...
- 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页(二)前端修改、添加表格行点击弹出模态框
在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...
- Ajax发送请求等待时弹出模态框等待提示
主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...
- JavaScript:用JS实现加载页面前弹出模态框
用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...
- bootstrap模态框动态赋值, ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框(JS)
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
- bootstrap-table:操作栏点击编辑按钮弹出模态框修改数据
核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...
- 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 ...
- yii 页面加载完成后弹出模态框
<?php $js = <<<JS $('#page-modal').modal('show');//页面加载完显示模态框 $('.modal-dialog').css('wi ...
- 关于系统弹出错误:429 , ActiveX 部件不能创建对象 的解决方法
例如:win7 win10的系统,有时候运行某些软件会出现:429 , ActiveX 部件不能创建对象 的情况. 提示: "运行时错误'429': ActiveX 部件不能创建对象&quo ...
随机推荐
- Rancher2.0中邮件通知的设置
1-邮件通知的设置-中国电信189邮箱 2-2-邮件通知的设置-腾讯免费企业邮箱 **说明:网易163邮箱.QQ邮箱没有设置成功,可能是因为邮箱设置得太安全的缘故. 参考链接: 中国电信189邮箱 ...
- maven打包时出现 Failed to execute goal org.apache.maven.plugins:maven-install-plugin:2.4:install (default-install) on project……
maven在打包时只会默认打jar包,而那些xml等配置文件默认不打包进去的,这样的话在mybatis的配置使用中就有问题了. 要自己配置后手动打包才能将xml文件也纳入打包的范围,配置后打包发现出现 ...
- 整合SpringData JPA
ORM(Object Relational Mapping): 1).编写一个实体类(bean)和数据表进行映射,并且配置好映射关系: //使用JPA注解配置映射关系 @Entity //告诉JPA这 ...
- React文档(十四)深入JSX
根本上,JSX只是为React.createElement(component, props, ...children)函数提供语法糖.JSX代码是这样的: <MyButton color=&q ...
- 946. Validate Stack Sequences验证栈序列
网址:https://leetcode.com/problems/validate-stack-sequences/ 参考:https://leetcode.com/problems/validate ...
- Yii框架实现restful 接口调用,增删改查
创建模块modules; 在main.php中配置文件:(1) (2)控制器层: namespace frontend\modules\v1\controllers;use frontend\modu ...
- c# 转换成时间类型
if (rngFound.Value.ToString().Contains("/")) { closingdate = rngFound.Value; } else if (rn ...
- 把旧系统迁移到.Net Core 2.0 日记 (19) --UI转用adminLTE
之前用JEasyUI,它的datagrid比较强大,但region的布局界面就太简陋了. 把布局界面改成adminLTE 左边菜单要做成动态,从xml文件加载, 可以参考NOPCommerce的源码来 ...
- 负载均衡----实现配置篇(Nginx)
同类文章:负载均衡----概念认识篇 吐槽:自从那篇“探讨负载均衡”那篇文章被博客园吐槽后,心里极度不平衡,思来想去还是把名字改成“负载均衡----概念认识篇”,再加多几篇文章来诠释上篇文章的精华所在 ...
- RAID的详细配置
一.RAID 1.RAID机制通过使用多硬盘并行工作的方式来提高硬盘的IO性能 2.RAID分为多种,称之为RAID level,RAID共有7级:RAID0~RAID6 3.常用的RAID级别有:R ...