有一个需求是给一个视频增加遮罩 我研究了下 抽象出来就是给一个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. Django的media配置与富文本编辑器使用的实例

    效果预览 文章列表 添加文章 编辑文章|文章详情|删除文章 项目的基本文件 项目的Model from django.db import models # 导入富文本编辑器相关的模块 from cke ...

  2. Delphi XE2 之 FireMonkey 入门(6) - TLine、TEllipse、TCircle、TPie、TArc、TRectangle、TRoundRect、TCalloutRectangle

    它们都是继承自 TShape 类, 共同拥有如下属性: Fill            : TBrush;      //填充 Stroke          : TBrush;      //边线( ...

  3. MVC 源码系列之控制器执行（二）

    ## 控制器的执行 上一节说道Controller中的ActionInvoker.InvokeAction public virtual bool InvokeAction(ControllerCon ...

  4. C# datatable 导出到Excel

    datatable导出到Excel /// <summary> /// 将DataTable导出为Excel文件(.xls) /// </summary> /// <pa ...

  5. 自翻唱龙珠超OP2【限界突破X幸存者】

    娱乐向:自翻唱龙珠超OP2[限界突破X幸存者] 翻唱度盘下载>> MP4: http://video.yingtu.co/0/e20dad3b-14d1-47a4-ad26-196a961 ...

  6. suv的使用

    一.什么是SVN? SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到 ...

  7. 安全运维 - Linux系统攻击回溯

    入侵排查思路 (1)- 日志分析 日志分析 默认日志路径: /var/log 查看日志配置情况: more /etc/rsyslog.conf 重要日志: 登录失败记录: /var/log/btmp ...

  8. ModelForm基本使用

    介绍 Django提供Form和ModelForm两种表单验证方式.相比较Form,ModelForm可以直接与与数据库表相关联,不需要像Form那样需要手动逐一字段添加表单验证的字段.且可以随意选择 ...

  9. Linux系统中tomcat的安装及优化

    Linux系统中Tomcat 8 安装 Tomcat 8 安装 官网:http://tomcat.apache.org/ Tomcat 8 官网下载:http://tomcat.apache.org/ ...

  10. linux 阿里云 centos7 环境下安装easymock（一）

    一.说一说Easy-mock的使用场景和优点:1.Easy Mock 是一个可视化,并且能快速生成 模拟数据 的持久化服务,2.基于 Swagger 创建项目,以节省手动创建接口的时间,这点也是我搭建 ...