很多网站，当点了一个按钮后，弹出一个窗口，底层变透明不可选，就是用到层的概念，至少三层

第一层，底层原始层

第二层，遮罩层，用到positon: fixed; top bottom left right 全为0;再加一个透明度opacity: 0.5;

第三层，弹出层，

当然这几层得有个顺序，z-index 数字越大越在顶层。最后就是用js实现display为none;

<body>

<div style="position: fixed;top: 50%;left: 50%;margin-top:  -150px;margin-left: -250px; z-index: 10;width: 500px;height: 300px;background-color: gold;"></div>

<div style="position: fixed;z-index: 9;top: 0;bottom:0;left: 0;right: 0;background: #000;opacity: 0.5;"></div>

<div style="width: 100%;height: 2000px;background-color: #4affe5; border: 1px solid #ff0f1e; margin: 0 auto;"></div>

</body>

　　

position实现分层和遮罩层功能的更多相关文章

  1. jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...

  2. Angularjs 实现页面遮罩层功能

    实现效果: 1.loading指令: "use strict" /** * Created by yw on 2015/9/27. * user defined loading d ...

  3. 自写图片遮罩层放大功能jquery插件源代码，photobox.js 1.0版，不兼容IE6

    阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能 ...

  4. 弹出页面遮罩层，以及web端和移动端阻止遮罩层的滑动。

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:a ...

  5. html实现弹框，并伴随遮罩层，且弹框居中

    本文介绍的内容主要实现的功能有,出现弹框,并且伴随遮罩层,且弹框一直居中. html和js代码: <div id="hidebg"></div> <d ...

  6. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  7. vue实现一个移动端屏蔽滑动的遮罩层

    在扯废话浪费大家的时间之前,先上个代码好了,使用vue实现起来很简单-- <div class="overlayer" @touchmove.stop > </d ...

  8. java javaScript实现遮罩层 动态加载

    通过java.JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关 ...

  9. jQuery遮罩层插件

    在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...

随机推荐

  1. Spring REST API

    RPC是面向服务的,并关注与行为和动作:而REST是面向资源的,强调描述应用程序的事务的名词.REST将资源的状态以最适合客户端或服务端的形式从服务器端转移到客户端. REST Representat ...

  2. 关于Q-LEARNING的优化

    Q-LEARNING 最后得到的一个图寻路最佳路径:---直接转化为图关于多顶点深度遍历热度传递 V(level+1) = 0.8 * Max(Vi(level))   这个方法可以在O时间收敛 原方 ...

  3. make clean,make distclean与make depend的区别

    make clean仅仅是清除之前编译的可执行文件及配置文件. 而make distclean要清除所有生成的文件. Makefile 在符合GNU Makefiel惯例的Makefile中,包含了一 ...

  4. 【leetcode】234. Palindrome Linked List

    234. Palindrome Linked List 1. 使用快慢指针找中点的原理是fast和slow两个指针,每次快指针走两步,慢指针走一步,等快指针走完时,慢指针的位置就是中点.如果是偶数个数 ...

  5. 两道不错的递推dp

    hdoj-4055 #include <cstdio> #include <cstring> #include <iostream> #include <al ...

  6. Beta周第14次Scrum会议(11/23)【王者荣耀交流协会】

    一.小组信息 队名:王者荣耀交流协会 小组成员 队长:高远博 成员:王超,袁玥,任思佳,王磊,王玉玲,冉华 小组照片 二.开会信息 时间:2017/11/23 17:02~17:14,总计12min. ...

  7. C语言---辗转相除法 HDU 2503

    Problem Description 给你2个分数,求他们的和,并要求和为最简形式. Input 输入首先包含一个正整数T(T < =1000),表示有T组测试数据,然后是T行数据,每行包含四 ...

  8. kafka安装和部署

    阅读目录 一.环境配置 二.操作过程 Kafka介绍 安装及部署 回到顶部 一.环境配置 操作系统:Cent OS 7 Kafka版本:0.9.0.0 Kafka官网下载:请点击 JDK版本:1.7. ...

  9. hdu1907 John 博弈

    Little John is playing very funny game with his younger brother. There is one big box filled with M& ...

  10. 【UOJ#21】【UR#1】缩进优化

    我好弱啊,什么题都做不出来QAQ 原题: 小O是一个热爱短代码的选手.在缩代码方面,他是一位身经百战的老手.世界各地的OJ上,很多题的最短解答排行榜都有他的身影.这令他感到十分愉悦. 最近,他突然发现 ...