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+的代码,可以更加简单优化的.整个主页交互效果能基本,包括轮播,视频,点击变化形状,移入蒙版,瀑布流加载滑动,旋转等等.轮播导航没有完全做完,暂时做了往右无限推动.个人觉 ...
随机推荐
- 201521123118《java程序设计》第一周学习总结
1. 本周学习总结 根据学习的过程中,虽然听学习过的人说过,c语言和java语言差不多,学习过c语言 在学java会比较容易,但是这一周发现,java和c还是有一些差别的: java语言是面向对象的语 ...
- 201521123072《java程序设计》第十周学习总结
201521123072<java程序设计>第十周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异 ...
- UVW源码漫谈(二)
前一篇发布出来之后,我看着阅读量还是挺多的,就是评论和给意见的一个都没有,或许各位看官就跟我一样,看帖子从不回复,只管看就行了.毕竟大家都有公务在身,没太多时间,可以理解.不过没关系,我是不是可以直接 ...
- 复用代码【SSH配置文件】
web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="htt ...
- Ningx集群环境搭建
Ningx集群环境搭建 Nginx是什么? Nginx ("engine x") 是⼀个⾼性能的 HTTP 和 反向代理 服务器,也是⼀个 IMAP/ POP3/SMTP 代理服务 ...
- IOS SDWebImage实现基本原理详解(转载)
1)当我门需要获取网络图片的时候,我们首先需要的便是URl没有URl什么都没有,获得URL后我们SDWebImage实现的并不是直接去请求网路,而是检查图片缓存中有没有和URl相关的图片,如果有则直接 ...
- Opengl4.5 中文手册—D
索引 A B C D E F G H I J K L M N O P Q ...
- 深入浅出AQS之共享锁模式
在了解了AQS独占锁模式以后,接下来再来看看共享锁的实现原理. 原文地址:http://www.jianshu.com/p/1161d33fc1d0 搞清楚AQS独占锁的实现原理之后,再看共享锁的实现 ...
- css常用属性2
1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动 ...
- MySQL数据库设计基础
为什么需要规范的数据库设计? 什么是数据库设计? 数据库设计就是将数据库中的数据实体及这些数据实体之间的关系,进行规划和结构化的过程. 数据库设计非常重要! 数据库中创建的数据结构的种类,以及在数据实 ...