有一个需求是给一个视频增加遮罩 我研究了下 抽象出来就是给一个div增加遮罩

原理是：最外层的div使用relative定位     然后里面放两个子div  一个是不被遮的  另一个是遮罩（用absolute定位），最后用js控制显示状态的变化

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>

<style>

   .warp{

    absolute:relative;

   }

.main{

width:800px;

height:800px;

border:1px solid #cccccc;

color:red;

font-size: 22px;

}

.filter{

width:800px;

height:800px;

background-color:black;

position:absolute;

left:0;

top:0;

filter:

                opacity:0.5;/*其他，透明度50%*/

                z-index:99;

               display:none;

}

.close{

font-size: 22px;

color:red;

margin:50px auto;

}

</style>

</head>

<body>

<div class="warp">

<div class="main">

<div class="test" onclick="Filter();">弹出遮罩</div>

</div>

<div id="filter" class="filter">

   <div class="close" onclick="Close();">关闭</div>

</div>

</div>

<script>

var filter=document.getElementById("filter")

function Filter(){

filter.style.display="block";

}

function Close(){

filter.style.display="none";

}

</script>

</body>

</html>

　　

在一个div上增加遮罩的更多相关文章

  1. WinForm特效:桌面上的遮罩层

    一个窗体特效,帮你了解几个windows api函数.效果:windows桌面上增加一个简单的遮罩层,其中WS_EX_TRANSPARENT 比较重要,它实现了鼠标穿透的功能. using Syste ...

  2. web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

    https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开   <style typ ...

  3. Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。

    Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法EDIT Object.defineProperty(obj, ...

  4. 如何在一个页面上让多个jQuery

    如何在一个页面上让多个jQuery共存呢?比如jquery-1.5和jquery-1.11. 你可能会问,为什么需要在一个页面上让多个jQuery共存?直接引用最新版本的jQuery不行吗? 答案是, ...

  5. ZeroMQ接口函数之 ：zmq_send – 在一个socket上发送一个消息帧

    ZeroMQ 官方地址 :http://api.zeromq.org/4-1:zmq-send zmq_send(3)              ØMQ Manual - ØMQ/4.1.0 Name ...

  6. AIX上增加逻辑卷时报错误0516-787 extendlv: Maximum allocation for logical volume

    AIX上增加逻辑卷时报错误0516-787 extendlv: Maximum allocation for logical volume jdelv02 is 512. 在往aix使用chfs -a ...

  7. 如何在一个div标签里显示出另一个网页？ <iframe src=" http://www.baidu.com " width="800px" height="200px" scrolling="no" frameborder="0"> </iframe>

    如何在一个div标签里显示出另一个网页? 用在div里用iframe,就像下面的代码 <iframe src=" http://www.baidu.com " width=& ...

  8. FOR ALL ENTRIES IN 与 INNER JOIN 写在一个SQL上影响效率

    SELECT likp~vbeln likp~lfart lips~werks likp~kunnr INTO CORRESPONDING FIELDS OF TABLE it_likps FROM ...

  9. Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法

    Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法 最近在适用Ext JS4开发 ...

随机推荐

  1. clojure 语法

    Clojure 是一种运行在 Java 平台上的 LISP 方言,LISP 是一种以表达性和功能强大著称的编程语言. ; 分号作为注释的开始 ; clojure 用括号把元素括起来,元素之间用空格隔开 ...

  2. 架构-层-Model：Model

    ylbtech-架构-层-Model:Model 1.返回顶部 1. Model,意思是模特儿,模特儿是英文“model”的音译.模特一般来说要五官端正,身材良好,有气质,展示能力强,另外身高要具备一 ...

  3. Delphi XE2 之 FireMonkey 入门(4) - 控件天生可做容器

    1.新建 FM(HD) 工程, 先添加 TLine(默认名称是 Line1);2.在 Line1 选择状态下添加 Button1;3.取消选择后添加 Button2 此时, Button1.Paren ...

  4. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第5节 String类_8_字符串的分割方法

    使用空格分割 这个参数其实是个正则表达式 如果用英文的句号来切分就会有问题.. 没有输出任何东西 输出他的长度看下 数组的长度输出为0 注意事项:

  5. 《图解设计模式》读书笔记8-2 MEMENTO模式

    目录 Memento模式 示例代码 程序类图 代码 角色和类图 模式类图 角色 思路拓展 接口可见性 保存多少个Memento 划分Caretaker和Originator的意义 Memento模式 ...

  6. ELK Stack 企业级日志收集平台

    ELK Stack介绍 大型项目,多产品线的日志收集 ,分析平台 为什么用ELK? 1.开发人员排查问题,服务器上查看权限 2.项目多,服务器多,日志类型多 ELK 架构介绍 数据源--->lo ...

  7. unique()与nunique()

    1 unique() 统计list中的不同值时,返回的是array.它有三个参数,可分别统计不同的量,返回的都是array. 当list中的元素也是list时,尽量不要用这种方法. import nu ...

  8. PHP超时提示Fatal error: Maximum execution time of 30,解决方案

    PHP执行超时提示如下:Fatal error: Maximum execution time of 30 seconds exceeded in D:\php\AppServ\www\sum3\te ...

  9. 浅谈Java反射机制 之 获取类的 方法 和 属性（包括构造函数）

    上一篇 获取 类 的字节码文件 我们讲到了获取类的字节码文件的三种方法 第三种方法通过getClass("全路径名")获取字节码文件最符合要求 1.获取构造方法 先贴上我们要获取的 ...

  10. 剑指offer--day03

    1.1题目:斐波那契数列:大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0).n<=39 1.2解题思路:斐波那契数列公式为: 这道题递归很好写 ...