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 ...
随机推荐
- 【虚拟机】解决网络适配器没有 VirtualBox Host-Only Ethernet Adapter 问题
下面以windows系统来演示重新安装 VirtualBox Host-Only Ethernet Adapter的方法 1.“win+r”输入“devmgmt.msc”,出现如下界面: 2.点击菜单 ...
- Maven项目中使用本地JAR包
<dependency> <groupId>com.TEST</groupId> <artifactId>hm-test</artifactId& ...
- Android 回调函数的理解,实用简单(回调函数其实是为传递数据)
作者: 夏至,欢饮转载,也请保留这段申明 http://blog.csdn.net/u011418943/article/details/60139910 一般我们在不同的应用传递数据,比较方便的是用 ...
- babel-plugin-import配置babel按需引入antd模块,编译后报错.bezierEasingMixin()
用create-react-app做项目的时候,同时引入了antd,为了实现按需加载antd模块,用到他们提供的 babel-plugin-import ( 一个用于按需加载组件代码和样式的 ba ...
- Excel中针对IP地址的排序方法
新建一个辅助排序列,用辅助列来扩展,辅助列公式如下: =TRIM(TEXT(LEFT(SUBSTITUTE(A1,".",REPT(" ",99)),100), ...
- php7 数据导出Excel office 2011中文乱码问题
public function test(){ $data = array( array( 'name' => '对对对', 'score' => 80, 'grade' => '急 ...
- linux下配置mysql 与错误解决
1.下载mysql wget https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.11-el7-x86_64.tar.gz 2.检查linux是否 ...
- 走进JavaScript
JavaScript的作用:操作HTML元素,响应用户的操作,处理数据: script标签的type或者language可以写也可以不写: script标签防止位置:head结束之前或者body结束之 ...
- apache配置,apache直接打开文件而不下载问题
apache什么用,如何下载的上面就不说了,apache的配置是一个非常复杂的工作,下面介绍最基本的apache配置吧,再介绍配置文件管理系统. 安装过后需修改配置: 修改httpd.conf配置文件 ...
- javascrit--常用互动方法
本文是刚开始学习javascript的一些基础知识 JavaScript--互动 JavaScript输出内容 document.write("内容"+"<br&g ...