首先展示页面效果：

　　遮罩没出现的页面张酱紫：页面在楼层二这个位置。

　　

　　遮罩显示：后面页面页面任停留在当前浏览位置，滚动条并未回顶部

　　

　　下面来说说写法：

　　css：

　　　　页面具体布局样式。。。。。。（此处省略无数个字）

　　　　遮罩层央视：遮罩层的样式就自己项目来写。这里只是举个例子。。。。。

　　　　.zhe_wrap{
　　　　　　position: fixed;
　　　　　　width: 100%;
　　　　　　height: 100%;
　　　　　　top: 0;
　　　　　　left: 0;
　　　　　　background: rgba(0,0,0,0.8);
　　　　}
　　　　.zhe_con_wrap{
　　　　　　position: absolute;
　　　　　　width: 40%;
　　　　　　height: 80%;
　　　　　　top: 10%;
　　　　　　bottom: 10%;
　　　　　　left: 30%;
　　　　　　background: rgba(255,255,255,1);
　　　  }

　　html：　

　　　　<!DOCTYPE html>
　　　　<html>
　　　　<head>
　　　　　　<meta charset="UTF-8">
　　　　　　<title></title>
　　　　　　<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
　　　　　</head>
　　　　<body>
　　　　　　<div class="dom_wrap">
　　　　　　　　<!--页面内容部分-->
　　　　　　</div>
　　　　　　<!--遮罩层-->
　　　　　　<div class="zhe_wrap" style="display: none;">
　　　　　　　　<div class="zhe_con_wrap">
　　　　　　　　　　<!--遮罩层内容-->
　　　　　　　　</div>
　　　　　　</div>
　　　　</body>
　　　　</html>

　　　那么重点来了。。。。。js:

　　　　当遮罩层（弹层）出现的时候给body设置style:overflow:hidden;属性就可以，哈哈哈哈哈，就这么简单。。。。

　　　　当遮罩层（弹层）消失的时候把body属性设置成overflow：auto，页面就可以继续在刚浏览的位置浏览了。。。。

　　

非一屏页面，出现遮罩层页面位置不动，并且遮罩层一屏显示。（pc,移动端都适用的方法）的更多相关文章

  1. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  2. PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题

    PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...

  3. 非等高cell实战--实现微博页面

    代码地址如下:http://www.demodashi.com/demo/11639.html 前言 学习过UITableView.AutoLayout以及MVC的相关知识,接下来通过一个微博页面实战 ...

  4. 关于wordpress其他分类页面正常单一分类页面白屏的解决

    关于wordpress其他分类页面正常单一分类页面白屏的解决 朋友的一个站,10个分类页面,9个正常,其中一个打开白屏或者500错误 下载 nginx的日志文件查看 收到如下提示: ecv() fai ...

  5. elementUI vue 页面加载的时候页面出现了黑字 页面优化处理 按钮弹出框文字

    elementUI 页面如果需要加载很多东西的时候, 自己定义的按钮或者弹出框dialog的文字就会显示在页面上, 一闪而过, 因此需要优化一下, elementUI 提供的loading有遮罩层, ...

  6. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面

    创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...

  7. 与众不同 windows phone (27) - Feature（特性）之搜索的可扩展性, 程序的生命周期和页面的生命周期, 页面导航, 系统状态栏

    原文:与众不同 windows phone (27) - Feature(特性)之搜索的可扩展性, 程序的生命周期和页面的生命周期, 页面导航, 系统状态栏 [索引页][源码下载] 与众不同 wind ...

  8. PHP 404页面/如何设置404页面/URL静态化/URL伪静态化

    php中如何设置404页面及其他错误页面 首先在项目根目录下新建文件,文件名为" .htaccess " 在该文件中写入一下配置项: ErrorDocument 404 /404. ...

  9. 多页面应用 VS 单页面应用

    多页面应用 每一次页面跳转,后端都会返回一个新的HTML文件, 优点:首屏时间快(只经历了一个HTTP请求),SEO效果好 缺点:页面切换慢 单页面应用 进行页面之间跳转时,并不去加载HTML文件,而 ...

随机推荐

  1. 【ASP.NET MVC 学习笔记】- 05 依赖注入工具Ninject

    本文参考:http://www.cnblogs.com/willick/p/3223042.html 1.Ninject是一款轻量级的DI工具,可通过VS的插件NuGet将其引用到项目中. 2.使用N ...

  2. 【ASP.NET MVC 学习笔记】- 04 依赖注入（DI）

    本文参考:http://www.cnblogs.com/willick/p/3223042.html 1.在一个类内部,不通过创建对象的实例而能够获得某个实现了公开接口的对象的引用.这种"需 ...

  3. Linux系列教程（四）——Linux文件和目录处理命令

    这个系列教程的前面我们讲解了如何安装Linux系统,以及学习Linux系统的一些方法.那么从这篇博客开始,我们就正式进入Linux命令的学习.学习命令,首先要跟大家纠正的一点就是,我们不需要记住每一条 ...

  4. Java规范推荐

    Java规范推荐 推荐:http://blog.csdn.net/tristansmile/article/details/7989670 命名规范 项目名:全部小写 Package 的命名:应该都是 ...

  5. LeetCode 628. Maximum Product of Three Numbers （最大三数乘积）

    Given an integer array, find three numbers whose product is maximum and output the maximum product. ...

  6. FastDFS与Nginx的配置说明

    1.简介     FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负载均衡的问题.特别适合以文件为载 ...

  7. （转）Spark性能优化：资源调优篇

      在开发完Spark作业之后,就该为作业配置合适的资源了.Spark的资源参数,基本都可以在spark-submit命令中作为参数设置.很多Spark初学者,通常不知道该设置哪些必要的参数,以及如何 ...

  8. C. New Year and Rating

    C. New Year and Rating time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  9. Windows解决anaconda下双python版本安装TensorFlow

    首先,就是双版本anaconda的安装: 以前安装好的是python2.7版本,而TensorFlow的安装仅支持3.5版本的.但是自己本来的2.7版本又不想遗弃.所以安装双版本的: 在anacond ...

  10. VS2013装扩展RazorGenerator

    问题:vs2013工具扩展和更新搜索关键字:Razor Generator查找不到,如图 解决:下载网址:https://github.com/RazorGenerator/RazorGenerato ...