有一个需求是给一个视频增加遮罩 我研究了下 抽象出来就是给一个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. win10蓝屏1

    win10一直蓝屏. 事件查看里有系统错误提示 DCOM部分组件错误,表现为:应用程序-特定 权限设置并未向在应用程序容器 不可用 SID (不可用)中运行的地址 LocalHost (使用 LRPC ...

  2. 运行jar包shell脚本

    #!/bin/sh #该文件必须放在jar包的目录下,因为是以相对路径来运行的.不放jar包目录的话,可以直接在jar_name参数写绝对路径 #start 设置三个参数 #环境 profile=te ...

  3. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_04 数据结构_5_数据结构_红黑树

    生活中的树和计算机中的树.计算机的树是倒着的

  4. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_08 Map集合_2_Map常用子类

    常用的实现类HashMap 它的子类.LinkedHaspMap

  5. Java ——数组 选择排序 冒泡排序

    本节重点思维导图 数组 public static void main(String[] args) { int a ; a=3; int[] b; b = new int[3];//强制开辟内存空间 ...

  6. elementUi--->实现上传图片效果（upload+formData）

    现在谈一下elelmentui中使用Upload 上传通过点击或者拖拽上传文件(图片) <el-upload name="multfile"    //上传的文件字段名 cl ...

  7. （4.31）quotename函数

    操作sql server尤其是写存储过程时,要用到各种各样的函数,今天就总结一个quotename()的用法. 1.语法: quotename(‘character_string’[,‘quote_c ...

  8. 将java项目转换成javaWeb项目

    1.Ctrl+Shift+R快捷键:找到此项目中的.project文件,打开修改文件内容 在<natures> </natures>代码标签中,添加些内容: <natur ...

  9. Spring Security框架入门

    1.Spring Security框架入门 1.1 Spring Security简介 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框 ...

  10. HDU 6617 Enveloping Convex（凸包+半平面交+二分）

    首先对于这m个点维护出一个凸包M,那么问题就变成了判断凸包P进行放大缩小能不能包含凸包M.(凸包P可以进行中心对称变换再进行放大缩小,见题意) 如何判断合适的相似比呢,我们可以用二分去放大缩小凸包P的 ...