首先展示页面效果：

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

　　

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

　　

　　下面来说说写法：

　　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. Memcached存储命令

    Memcached各个存储命令的语法格式都类似,且有相同的参数和参数含义,先将可能出现的各个参数的意义说明如下: key:    键值 key-value 结构中的 key,用于查找缓存值. flag ...

  2. LeetCode 152. Maximum Product Subarray （最大乘积子数组）

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  3. 【HDFS】相关概念及常用命令

    本文用于记录Hadoop中HDFS相关概念以及常用命令,以便日后查询. 概念之间无先后顺序,只是用于记录. 参考的Hadoop的版本是2.7.3 1. 角色 hadoop fs [hdfs dfs] ...

  4. jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同

    jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿$().click()和$(document).on('click','要选择 ...

  5. 初入WebService

    搭建webservice需要用到的jar applicationContext.xml配置文件 <?xml version="1.0" encoding="UTF- ...

  6. Problem E: 动物爱好者

    Problem E: 动物爱好者 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 882  Solved: 699[Submit][Status][Web ...

  7. 从ELK到EFK演进

    背景 作为中国最大的在线教育站点,目前沪江日志服务的用户包含网校,交易,金融,CCTalk 等多个部门的多个产品的日志搜索分析业务,每日产生的各类日志有好十几种,每天处理约10亿条(1TB)日志,热数 ...

  8. 面试经典算法题集锦——《剑指 offer》小结

    从今年 3 月份开始准备找实习,到现在校招结束,申请的工作均为机器学习/数据挖掘算法相关职位,也拿到了几个 sp offer.经历这半年的洗礼,自己的综合能力和素质都得到了一个质的提升. 实话说对于未 ...

  9. jquery操作html小技巧

    1.隐藏table整列 $("#tableID tr").find('td:eq(N)').hide();

  10. java面试题及答案

    JAVA相关基础知识1.面向对象的特征有哪些方面 1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时 ...