首先展示页面效果：

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

　　

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

　　

　　下面来说说写法：

　　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. ViewPager使用记录2——展示动态数据

    ViewPager是v4支持库中的一个控件,相信几乎所有接触Android开发的人都对它不陌生.之所以还要在这里翻旧账,是因为我在最近的项目中有多个需求用到了它,觉得自己对它的认识不够深刻.我计划从最 ...

  2. python自动化运维五：paramiko

    p { margin-bottom: 0.25cm; line-height: 120% } a:link { } paramiko是基于python实现的SSH2远程安全连接,支持认证以及密钥方式, ...

  3. JavaScript数组去重方法汇总

    1.运用数组的特性 1.遍历数组,也遍历辅助数组,找出两个数组中是否有相同的项,若有则break,没有的话就push进去. //第一版本数组去重 function unique(arr){ var r ...

  4. 阿里JAVA开发手册零度的思考理解(二)

    转载请注明原创出处,谢谢! 说在前面 人生的大道上默默地走,就必须要有一盏灯亮着为你引导方向!而这盏灯抑或只是一句话,一句鼓励,一个赞美,一次承认,一次认可,一次相识一次交流-- 上篇文章:阿里JAV ...

  5. Xilinx ISE 14.1中模拟True Dual Port RAM例子

    <一>创建工程 创建工程在此略过. <二>基本代码 1.创建一个Verilog modual代码如下: module main( input clk, input rsta, ...

  6. 2015上海赛区B Binary Tree

    B - Binary Tree   Description The Old Frog King lives on the root of an infinite tree. According to ...

  7. Shuffle过程的简单介绍

    Shuffle是连接Map和Reduce的桥梁 Shuffle分为Map端的Shuffle和Reduce端的Shuffle Map端的shuffle 1输入数据和执行任务: 分片后分配Map任务,每个 ...

  8. js实现前端下载文件

    在前端下载文本格式的文件时,可采用下面的方式: (1)创建基于文件内容的Blob对象: (2)通过URL上的createObjectURL方法,将blob对象转换成一个能被浏览器解析的文件地址. (3 ...

  9. Python datetime之timedelta

    该函数表示两个时间的间隔 参数可选.默认值都为0:datetime.timedelta(days=0, seconds=0, microseconds=0, milliseconds=0, minut ...

  10. 安装MongoDB启动时报错‘发生系统错误2’的解决办法

    安装数据库mongodb启动时报"发生系统错误2". 这个问题是如果你之前已经装过一次,并且两次安装目录不同,就绝对会碰到的,因为你之前安装的路径已经在注册表中生成了,并没有随着你 ...