有一个需求是给一个视频增加遮罩 我研究了下 抽象出来就是给一个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. 【洛谷P2239 螺旋矩阵】

    题目链接 直接看题 一看就很数学 我们不妨来画图 画出几个矩阵,找他们的关系 然后发现 当i==1时,对应的值就是j所对应的值: 当i==n时,所对应的值就是3*n-2-j+1: 当j==1时,所对应 ...

  2. set集合 浅层拷贝会和深层拷贝

    一.什么是set集合 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 1.去重,把一个列表变成集合, ...

  3. kafka 和 rocketMQ 的数据存储

    kafka 版本:1.1.1 一个分区对应一个文件夹,数据以 segment 文件存储,segment 默认 1G. 分区文件夹: segment 文件: segment 的命名规则是怎样的? kaf ...

  4. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_08 Map集合_11_JDK9对集合添加的优化_of方法

    用了of后集合的长度不能再改变!!!!! set不允许有重复元素 所以会抛出异常 重复的数据删掉就不报错. 改变长度 同样会报错. Map的key不允许有重复

  5. charles之抓取浏览器https请求

    用charles抓取浏览器https的包时,请求显示为unknown,且请求和响应数据乱码,本篇介绍如何抓取正常响应的https请求 目录 1.安装charles 2.安装证书.添加域名 3.抓包 1 ...

  6. 1.k8s.资源清单

    #k8s常用资源 工作负载:Pod,rs(ReplicasSet),deploy(Deployment),sts(StatefulSet),ds(DaemonSet),Job,Cronjob 服务发现 ...

  7. Java容器框架总结（一）

    本篇根据<Java编程思想> 第11章 持有对象 整理,总结Java容器框架中常用集合类及接口的特点及使用场景. (一)总结 1)数组将数字与对象联系起来:可以保存基本类型的数据:一旦生成 ...

  8. 【mysql连接与mysqldump】INFORMATION_SESSION_VARIABLES feature is disabled

    摘要: mysql5.7 客户端连接出现:INFORMATION_SESSION_VARIABLES feature is disabled问题: mysqldump: Couldn't execut ...

  9. RocketMQ的消息发送及消费

    RocketMQ消息支持的模式: 消息支持的模式分为三种:NormalProducer(普通同步),消息异步发送,OneWay. 消息同步发送: 普通消息的发送和接收在前面已经演示过了,在前面的案例中 ...

  10. Maven-Eclipse使用maven创建HelloWorld Java项目

    1.依次选择File-->New-->Other-->Maven-->Maven Project,Next 2.选择maven-archetype-quickstart,Nex ...