实现思路：

1、需要有一个层将body遮住，放在body上方。

2、修改body的overflow属性值为：hidden

废话不多说了，将关键代码贴出来了，兼容火狐，谷歌，ie

遮罩层的样式代码，红色部分是关键的部分

复制代码代码如下:
.cover {
position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60);
z-index: 1002; left: 0px; display:none;
opacity:0.5; -moz-opacity:0.5;
}

网页部分的代码

复制代码代码如下:
<body>

　　<div class="container" style="height:2000px;">
　　　　<div style="height:1000px;"></div>
　　　　<a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />
　　</div>
　　<div id="cover" class="cover"></div>
</body>

js部分的代码

复制代码代码如下:
function showMask(){
$('body').css("overflow","hidden")
$("#cover").show();
}

页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理的更多相关文章

  1. Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框

    父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" ...

  2. bootstrap模态框手动关闭遮盖层不消失

    模态框中 加载了一个子页面 子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: 1.$("#myModal").modal('hide');//模态框关闭 ...

  3. bootstrap 模态框中弹出层 input不能获得焦点且不可编辑

    bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. ...

  4. js实现页面遮罩层，并且阻止页面body滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Angularjs 实现页面遮罩层功能

    实现效果: 1.loading指令: "use strict" /** * Created by yw on 2015/9/27. * user defined loading d ...

  6. 基于bootstrap模态框、fakeLoader实现全局遮罩层

    一.fakeLoader.js介绍 fakeLoader.js 是轻量级的 jQuery 插件,帮助你创建动态的全屏加载掩饰微调效果,模拟页面预加载的效果. 插件下载地址:https://github ...

  7. （转）解决bootstrap 模态框的页面抖动

    使用bootstrap时,往往会出现页面抖动的效果,使得用户体验十分不友好. Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置bod ...

  8. Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条

    Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...

  9. 解决Bootstrap模态框切换时页面抖动 or页面滚动条

    Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...

随机推荐

  1. CentOS 7学习手册

    CentOS 7与之前版本有较大变动,查阅资料,整理得到如下手册(未完~). 一.安装 1.使用哪种方式安装 (1).虚拟机安装,推荐:VM,功能齐全,强大(Virtual Box也可以). (2). ...

  2. java.util.Date和java.sql.Date的区别和相互转化

    java.util.Date是在除了SQL语句的情况下面使用的.java.sql.Date是针对SQL语句使用的,它只包含日期而没有时间部分它 们都有getTime方法返回毫秒数,自然就可以直接构建. ...

  3. AndroidStudio-使用Translations Editor

    前言 如果你的App支持多语言,你需要正确的管理你的翻译字符串资源.Android Studio提供了翻译编辑器使更容易的查看和管理翻译资源. 关于翻译编辑器 翻译资源存储工程的多个目录下的多个XML ...

  4. [转] 安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.2出现0x80072f8a未指定的错误

    原文地址:安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.2出现0x80072f8a未指定的错误 最近DotNetCore更新到了1.0.1,Azure tools ...

  5. setTimeout和setInterval的各自使用场景

    默认的 setTimeout 只执行一次, 清除用clearTimeout setInterval 每间隔指定的时间, 就执行一次, 清除用clearInterval 但是, setTimeout也可 ...

  6. Eclipse将引用了第三方jar包的Java项目打包成jar文件的两种方法

    方案一:用Eclipse自带的Export功能 步骤1:准备主清单文件 “MANIFEST.MF”, 由于是打包引用了第三方jar包的Java项目,故需要自定义配置文件MANIFEST.MF,在该项目 ...

  7. UnicodeDecodeError: 'utf8' codec can't decode

    数据库存了些中文字符, 比如'处理脚本'这样的汉字, 结果导致一个python程序报错. 下面记录处理过程和相关结论. ===========================dal.py 程序片段,p ...

  8. Maven初级学习（一）手把手教你Maven安装

    序:学习安装Maven,在Windows和Unix系统上. 一.Windows系统安装MVN 前提正确安装JDK1.5以上的版本 1 下载最先版Mvn http://maven.opache.org/ ...

  9. Linux 中常见的命令行，持续更新

    1.添加自己的环境变量 root@adonis:~# echo $PATH /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin r ...

  10. assign与weak区别(面试)

    weak 比 assign 多了一个功能就是当属性所指向的对象消失的时候(也就是内存引用计数为0)会自动赋值为 nil ,这样再向 weak 修饰的属性发送消息就不会导致野指针操作crash. 可能不 ...