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 禁用滚动条的更多相关文章

  1. Bootstrap禁用响应式布局

    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...

  2. bootstrap禁用点击空白处关闭模态框

    原博主地址:http://www.cnblogs.com/godlovelian/p/4530342.html

  3. Bootstrap历练实例:禁用的按钮

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  4. jquery 禁用/启用滚动条

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. bootstrap学习笔记<五>(表单一)

    表单 bootstrap为表单提供三种样式:默认表单,水平表单,内联表单. <form class="form-horizontal" role="form&quo ...

  6. BootStrap 最佳资源合集(转)

    witter BootStrap是一款优秀的前端的框架,称得上是前端的一个框架利器.Web前端开发者每天都在与HTML.CSS.JavaScript打交道,然 而不少人都是在周而复始的写模板.样式和交 ...

  7. JS简易弹出层

    目标 实现简易的js弹出框.为了简单灵活的在小项目中使用. 实现思路 研究bootstrap的弹出框效果后,认为层级示意图如下: 层说明 弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹 ...

  8. [前端]使用JQuery UI Layout Plug-in布局 - wolfy

    引言 使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布局框架的材料,网上也挺多的.在项目中也使用到了,不过那是前端的工作 ...

  9. JS,CSS,HTML制作网页首页,视频轮播,隐藏点击等等。

    在整个项目中,总共写了1000+的代码,可以更加简单优化的.整个主页交互效果能基本,包括轮播,视频,点击变化形状,移入蒙版,瀑布流加载滑动,旋转等等.轮播导航没有完全做完,暂时做了往右无限推动.个人觉 ...

随机推荐

  1. 201521123002 《Java程序设计》第4周学习总结

    [TOC] 1. 本周学习总结 2. 书面作业 1.注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 参考文章 Eclipse添加注释简介 Ecli ...

  2. 201521123005《java程序设计》第四周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. ·继承(是什么,意义) -父类(被继承的类) -子类(继承父类) -多态(解决重复代码的问题 ...

  3. 201521123027 《JAVA程序设计》第二周学习总结

    1.本周学习总结 1.学习使用码云管理程序代码: 2.认识类型(整数.字节.浮点数.字符与布尔)与变量的使用: 3.学习运算符的基本使用以及类型转换的基本规则: 4.学习String类的一些使用方法: ...

  4. 201521123076 《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 创建线程方式: 定义Thread的子类,覆盖run(),之后创建实例.因为开销大,一般不用. 定义实现Run ...

  5. 201521123081《java程序设计》 第14周学习总结

    1. PTA反馈问卷 2. 雨课堂反馈问卷 本次作业参考文件 数据库PPT MySql操作视频与数据库相关jar文件请参考QQ群文件. 0. 本周课程设计发布 Java课程设计 1. 本周学习总结 1 ...

  6. java课设 五子棋代码编写(团队)

    1. 团队课程设计博客链接 http://www.cnblogs.com/yzb123/p/7063424.html 2.个人责模块或任务说明 1.主函数编写,设置图形界面 2,设置功能按钮 3.使用 ...

  7. thinkphp介绍及访问方式

    ThinkPHP框架 1.解压到www目录下,里面有一个index文件是入口文件,通过修改里面的APP_PATH进入不同的应用 2.ThinkPHP文件夹是核心文件夹,里面东西不要修改,可以查看,比如 ...

  8. java基础知识6-- 抽象类,抽象方法,接口,构造方法,类方法等易混淆的知识点

    一.抽象类和抽象方法 (B 继承  抽象类A) 抽象类:有抽象方法的一定是抽象类 抽象方法:方法名前有abstract修饰,且方法没有方法体,即{},不需要实现任何功能,只是声明 1.抽象类中的方法有 ...

  9. MySql Jar 包下载

    MySql JAR 包下载 我们要使用Spring 链接MySql  需要两个Jar 包   一个是C3p0   一个是MySql 的Connection Jar  包 C3p0: 进入下面的网址 h ...

  10. [解读REST] 4.基于网络应用的架构风格

    上篇文章介绍了一组自洽的术语来描述和解释软件架构:如何利用架构属性评估一个架构风格:以及对于基于网络的应用架构来说,那些架构属性是值得我们重点关注评估的.本篇在以上的基础上,列举一下一些常见的(RES ...