首先展示页面效果：

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

　　

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

　　

　　下面来说说写法：

　　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. 走进 Xamarin Test Recorder for Xamarin.Forms

    此篇是承接之前 走进 UITest for Xamarin.Forms 的,所以如果没有看过之前的可以先看下之前的 UITest 比起上一篇纯敲代码只适合程序员的 UITest ,这一篇不管是程序员还 ...

  2. Python实现网站注册验证码生成类

    # -*- coding:utf-8 -*- ''' Created on 2017年4月7日 @author: Water ''' import os import random import st ...

  3. Python多进程应用

    在我之前的一篇博文中详细介绍了Python多线程的应用:  进程,线程,GIL,Python多线程,生产者消费者模型都是什么鬼 但是由于GIL的存在,使得python多线程没有充分利用CPU的多核,为 ...

  4. Bluetooth A2DP --Audio payload type

    数据结构: 字段解释: payload type: 0x60(96), dynamic type type 定义: https://www.iana.org/assignments/rtp-param ...

  5. Linux分区规划与xshell使用排错

    1.1 没有重要数据 /boot   200M    存放系统的引导信息 内核 swap   交换分区   防止内存用光了 临时的一个内存 如果你的内存小于8G swap是内存的1.5倍   如果你的 ...

  6. JavaSE高级1

    内部类 内部类概念: 所谓内部类(Inner Class),顾名思义,就是将一个类定义在另一个类的内部.内部的类称之为内部类. 内部类的主要特点: 内部类可以很好的实现隐藏,可以使用protected ...

  7. python基础知识——基于python3.6

    语法糖 # # -*- coding: utf-8 -*- # #------------- # #--------- 语法糖--------------- # #------------------ ...

  8. JAVAWEB开发环境搭建，附JDK开发环境一键配置批处理bat

    JDK配置: CLASSPATH: .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar   JAVA_HOME: C:\Program Files\J ...

  9. 谷歌浏览器Chrome播放rtsp视频流解决方案

    找半天,HTML5的可以支持RTMP 但是无法播放RTSP,flash也止步于RTMP,最后同事推荐了个开源的好东东 VLC ,请教谷歌大神之后,这货果然可以用来让各浏览器(IE activex方式, ...

  10. 插件lombok的介绍安装

    Lombok插件 介绍一个不错的Eclipse插件Lombok 该插件对Log4j简化的代码,因为不大,所以jar包也存在呢! Lombox是Eclipse的一个插件,用来自动生成Java代码,减少手 ...