实现思路：

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. tomcat 无法加载js和css 等静态文件的问题

    前段时间做了个网站,在本地tomcat测试都没有问题,但是部署到阿里云上之后,系统样式全没了.jsp等动态页面访问正常. 打开浏览器监控发现所有的css 和js 文件返回都是404 .直接访问单个的c ...

  2. Spring中ApplicationContext对事件的支持

    Spring中ApplicationContext对事件的支持   ApplicationContext具有发布事件的能力.这是因为该接口继承了ApplicationEventPublisher接口. ...

  3. struts2基础篇(1)

    一.Struts2简介Struts2以WebWork优秀的设计思想为核心,吸收了Struts1的部分优点,建立了一个基于WebWork和Struts1的MVC框架. 二.搭建Struts2开发环境2. ...

  4. jquery ajax 提交 FormData

    $('form').submit(function(){ var formdata=new FormData(this); $.ajax({ type:'POST', url:'/url/path', ...

  5. Java并发编程核心方法与框架-Fork-Join分治编程（一）

    在JDK1.7版本中提供了Fork-Join并行执行任务框架,它的主要作用是把大任务分割成若干个小任务,再对每个小任务得到的结果进行汇总,这种开发方法也叫做分治编程,可以极大地利用CPU资源,提高任务 ...

  6. XMLHttpRequestUtil

    //XMLHttpRequest类 function XMLHTTPRequestUtil() { this.Instance = null; this.GetXMLHttpRequest = fun ...

  7. QQ空间HD(1)-UIPopoverController基本使用

    UIPopoverController 是iPad的专属API ViewController.m #import "ViewController.h" #import " ...

  8. 怎么搭建Web Api

    1.通常我们有个web 让后可以有个web api 提供接口2.通常我们分别建两个项目 web api 依赖web的来进行访问(说到底是依赖是IIS)3.我们先建个SmallCode.Test.Web ...

  9. jqueryui / accordion的用法记录

    jqueryui 的 widget 中包含了基本上我们都需要的ui组件, 除了那个unslider. 参考地址是: www.jqueryui.com. 要能够看懂/并使用/ 完全掌握的话, 就要使用其 ...

  10. [译]git revert

    git revert git revert用来撤销一个已经提交了的快照. 但不是从项目历史中移除这个commit, 而是生成一个新的commit, 老的commit还是保留在历史项目里面的. 这样做的 ...