实现思路：

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. Mini ORM——PetaPoco笔记(转)

    记录一下petapoco官网博客的一些要点.这些博客记录了PetaPoco是如何一步步改进的. 目录: Announcing PetaPoco PetaPoco-Improvements PetaPo ...

  2. JavaScript正则表达式方法总结

    str.match(reg) 1.reg没有全局标志g,match将只执行一次匹配.匹配成功返回一个数组,arr = [$0,$1,$2,...,index,str],匹配失败返回null. arr中 ...

  3. webstorm总结

    webStorm修改文件类型,文件着色 File->Settings->Editor->File Types

  4. C语言二维数组中的指针问题

    #include "stdio.h" void main() { int a[5][5]; int i,j; for (i=0;i<5;i++) { for (j=0;j&l ...

  5. Security Test Cases

    https://www.owasp.org/index.php/OWASP_Testing_Guide_v4_Table_of_Contents Username Enumeration Vulner ...

  6. VisualStudio基本使用(2)-使用VS2013来编译C语言程序

    切换到C语言程序所有目录,执行cl test.c

  7. svn三大目录trunk、branch和tag

    SVN中Branch和tag的比较在SVN中Branch和tag在一个功能选项中,在使用中也往往产生混淆.在实现上,branch和tag,对于svn都是使用copy实现的,所以他们在默认的权限上和一般 ...

  8. css3实现渐变的iPhone滑动解锁效果

    先贴代码 <!DOCTYPE html> <html> <head> <style> p{ width:50%; margin:0 auto; line ...

  9. git项目开发版本控制实践

    linux和bsd: 第一, bsd, berkeley software distribution, 伯克利软件套装, 是最开始的unix是开放的, 然后berkeley对unix进行了修改, 形成 ...

  10. [设计模式] javascript 之 组合模式

    组合模式说明 组合模式用于简单化,一致化对单组件和复合组件的使用:其实它就是一棵树: 这棵树有且只有一个根,访问入口,如果它不是一棵空树,那么由一个或几个树枝节点以及子叶节点组成,每个树枝节点还包含自 ...