实现思路：

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. jquermobile 安装

    代码 <script src="../Public/js/jquery-1.11.1.min.js"></script> <script src=&q ...

  2. cmake安装MySQL

    发现一个网址整理的挺好,请各位参考: http://www.chenyudong.com/archives/building-mysql-5-6-from-source.html#i 也可以参考我的另 ...

  3. sqlmap注入检测经验0x01

    某日偶遇一SQLInjection Point,MSSQL 2008,已开启显错模式. 马上扔进SQLMap跑,一路顺畅,竟然还是SA的权限,心想运气真好,无论如何都拿定了. 数据库,表,列都列出来了 ...

  4. oracle 11g express 修改oem端口

    begin dbms_xdb.sethttpport('8081'); dbms_xdb.setftpport('0'); end; / 这样就把端口设置为8081了.

  5. 通过mongodb客户端samus代码研究解决查询慢问题

    最近有项目需要用到mongodb,于是在网上下载了mongodb的源码,根据示例写了测试代码,但发现一个非常奇怪的问题:插入记录的速度比获取数据的速度还要快,而且最重要的问题是获取数据的速度无法让人接 ...

  6. java String 中 intern方法的概念

    1. 首先String不属于8种基本数据类型,String是一个对象. 因为对象的默认值是null,所以String的默认值也是null:但它又是一种特殊的对象,有其它对象没有的一些特性. 2. ne ...

  7. vim的寄存器和剪贴簿操作?

    vim 复制/ 删除 多行? 有确定序号的行: :10,15m20, 10,15co20 没有确定序号的行: ndd, nyy. 其中的n表示, 从当前行开始算起(当前行本身要包含!!!), 向下共删 ...

  8. linux的多媒体 播放 软件版权问题

    linux下基本很多 跟多媒体 相关的软件, 都是有版权的, 都是 第三方软件, 都是closed-resource的 都有版权问题, 因此, 几乎所有的 linux的 发行版 都不会带有 多媒体软件 ...

  9. mongodb 与 c++ 的配合使用

    最近在尝试使用 mongodb 作为服务端持久化方案,服务端程序是使用 c++ 写的,折腾了不少时间,记录一下吧. 1.下载 boost 1.56.0 http://www.boost.org/use ...

  10. Collection类相关总结

    集合类的框架如下: Collection(接口)    List(接口):允许重复.         ArrayList         Vector         LinkedList    Se ...