Bootstrap 禁用滚动条
Bootstrap中禁用滚动条的方法
逻辑:
当点击弹窗按钮后,js会为body元素添加一个modal-open的类,该类主要内容如下
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
说明:modal-open使用在body上,modal是弹出框最外层DIV上的样式
该类起到禁用滚动条的作用,同时为了保证界面不会因为滚动条的消失而发生变化(默认的滚动条17个像素,滚动条消失时,width:100%的元素会把这17个像素沾满,造成排版的变化),body元素的style中加入的padding-right:17px;
原理:
body中所有元素超出屏幕的部分隐藏 overflow: hidden; 上面的代码分别起到了禁用x轴和y轴滚动条的作用,同时用17px空白占据滚动条的位置
Bootstrap 禁用滚动条的更多相关文章
- Bootstrap禁用响应式布局
在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...
- bootstrap禁用点击空白处关闭模态框
原博主地址:http://www.cnblogs.com/godlovelian/p/4530342.html
- Bootstrap历练实例:禁用的按钮
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- jquery 禁用/启用滚动条
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap学习笔记<五>(表单一)
表单 bootstrap为表单提供三种样式:默认表单,水平表单,内联表单. <form class="form-horizontal" role="form&quo ...
- BootStrap 最佳资源合集(转)
witter BootStrap是一款优秀的前端的框架,称得上是前端的一个框架利器.Web前端开发者每天都在与HTML.CSS.JavaScript打交道,然 而不少人都是在周而复始的写模板.样式和交 ...
- JS简易弹出层
目标 实现简易的js弹出框.为了简单灵活的在小项目中使用. 实现思路 研究bootstrap的弹出框效果后,认为层级示意图如下: 层说明 弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹 ...
- [前端]使用JQuery UI Layout Plug-in布局 - wolfy
引言 使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布局框架的材料,网上也挺多的.在项目中也使用到了,不过那是前端的工作 ...
- JS,CSS,HTML制作网页首页,视频轮播,隐藏点击等等。
在整个项目中,总共写了1000+的代码,可以更加简单优化的.整个主页交互效果能基本,包括轮播,视频,点击变化形状,移入蒙版,瀑布流加载滑动,旋转等等.轮播导航没有完全做完,暂时做了往右无限推动.个人觉 ...
随机推荐
- 201521123056 《Java程序设计》第3周学习总结
1. 本周学习总结 -本周学习了面向对象,学会了如何用Eclipse自动生成setter/getter/toString以及构造有参函数等 2. 书面作业 1.代码阅读 public class Te ...
- 201521123001《Java程序设计》第2周学习总结
本周学习总结 码云可以很方便地储存我们写好的代码,不用在写代码的时候担心没带U盘 Java中有许多已经写好的具有特定功能的一段独立小程序,不需要每一个函数都自己编写 Java的float型和C语言的不 ...
- ThreadLocal原理及使用示例
简介:本文已一个简要的代码示例介绍ThreadLocal类的基本使用方式,在此基础上结合图片阐述它的内部工作原理. 欢迎探讨,如有错误敬请指正 如需转载,请注明出处 http://www.cnblog ...
- Mybatis第八篇【一级缓存、二级缓存、与ehcache整合】
Mybatis缓存 缓存的意义 将用户经常查询的数据放在缓存(内存)中,用户去查询数据就不用从磁盘上(关系型数据库数据文件)查询,从缓存中查询,从而提高查询效率,解决了高并发系统的性能问题. myba ...
- [07] ServletContext上下文对象
1.上下文的概念 我们在说到Servlet的继承关系时,提到自定义Servlet实际上间接实现了Servlet和ServletConfig两个接口,其中ServletConfig接口中定义了一个方法叫 ...
- Python学习笔记005_文件_OS_模块_pickle
>>> >>> # 文件 open()方法是打开文件,它有很多参数,第一个文件名是必须的(带路径)>>> >>> f = ope ...
- birt-j脚本调试 & 动态sql的实现
一个比较好的birt问题解决网址: http://www.myexception.cn/h/1335919.html 1,Birt的JavaScript脚本简单调试 Birt中的js脚本不能用aler ...
- 嵌入式Llinux学习路线图
版本 日期 作者 说明 V1 2016.07.29 韦东山 第1版本,Android部分未写 我是1999年上的大学,物理专业.在大一时,我们班里普遍弥漫着对未来的不安,不知道学习了物理后出去能做什么 ...
- RocketMQ之双Master方式部署以及简单使用
1.1.服务器环境 192.168.100.24 root nameServer1,brokerServer1 Master1 192.168.100.25 root nameServer2,brok ...
- oracle pl/sql 控制结构(分支,循环,控制)
一.pl/sql的进阶--控制结构在任何计算机语言(c,java,pascal)都有各种控制语句(条件语句,循环结构,顺序控制结构...),在pl/sql中也存在这样的控制结构.在本部分学习完成后,希 ...