首先展示页面效果：

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

　　

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

　　

　　下面来说说写法：

　　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. git 一口气带你走完git之旅

    1.git是目前世界上最先进的分布式版本控制系统.svn是集成式版本控制系统,那么问题来了,什么叫分布式管理和集中式管理? 首先,svn 需要有一个中央服务器,协同开发者需要同中央服务器连接,所有的版 ...

  2. 【Vue】利用父子组件间通信实现一个场景

    组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...

  3. 双十一临近，怎样让买家流畅地秒杀？ ——腾讯WeTest独家开放电商产品压测服务

    WeTest 导读 十一月临近,一年一度的电商大戏"双十一"又将隆重出场,目前各大商家已经开始各类优惠券的发放,各类大促的商品表单也已经提前流出,即将流入各个用户的购物车中. 作为 ...

  4. 微信小程序之页面下拉刷新

    如果需要给单个页面设置下拉刷新功能,不需要写在""window"对象里面,直接在  文件名称.json 里面设置即可 { "enablePullDownRefr ...

  5. HDU 6113 度度熊的01世界

    度度熊的01世界 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  6. HTML学习笔记 域元素(form表单、textarea文本域、fieldset域集合、input使用) 案例 第四节 （原创）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. NoSQL：linux操作memcached

    缓存数据库 一 NoSQL简介 NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL",泛指非关系型的数据库,随着互联网web2.0网站的兴起,传统的关系 ...

  8. Linux系列教程（十八）——Linux文件系统管理之文件系统常用命令

    通过前面两篇博客,我们介绍了Linux系统的权限管理.Linux权限管理之ACL权限 介绍了通过设定 ACL 权限,我们为某个用户指定某个文件的特定权限,这在Linux只能对于一个文件只能有所有者权限 ...

  9. js滚动加载小插件

    本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...

  10. map的常用方法

    1.头文件: #include<map> 2.定义: map<string,int>Map; 或: typedef map<string,int> MAP; MAP ...