有一个需求是给一个视频增加遮罩 我研究了下 抽象出来就是给一个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. base64加密小案例

    python终端下: import base64 >>> dict='{"name":"tom"}' >>> dict.en ...

  2. Numpy的补充（重要！！）

    轴的概念 英文解释  https://www.sharpsightlabs.com/blog/numpy-axes-explained/ 汉化解释 https://www.jianshu.com/p/ ...

  3. Jenkins简介&邮箱配置

    一.Jenkins基本介绍: Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.--摘自百科 二 ...

  4. base64编解码的两个函数（安全版本）

    void base64_encode_s(const unsigned char *str, long inlen, std::string& outstr, long* lpBufLen) ...

  5. 每日js练习

    第一次玩codewars,选了个最简单的题目 要求是: You have to write a function that describe Leo: if oscar was (integer) 8 ...

  6. vue封装element中table组件

    后台系统,table被用的次数比较多,所以决定提出来作为组件 1.新建一个Table.vue文件 <!--region 封装的分页 table--> <template>  & ...

  7. PHPstorm Xdebugger最全详细

    0 Xdebug调试的原理(选看) 图0-1 单机调试原理示意图 图0-2 多机调试原理示意图 对于PHP开发,初来咋到,开发环境的搭建和理解感觉是最烦人的一件事了.不像JAVA,打开一个Eclips ...

  8. javascript中json字符串对象转化

    li = [1,2,3,4] s = JSON.stringify(li)  ---转化为字符串 JSON.parse(s) --转化为对象

  9. 5款vue前端UI框架

    Vue.js是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 实用的 Vue.js组件库可以帮助我们快速搭建页面,下面介绍小编认为比较受欢迎的五个vue ...

  10. vue 中注册全局组件

    1  全局注册组件 建一个 js 文件, 注册全局组件, 并且暴露出去 然后再在 main.js  中引入       在页面就可以直接使用了    2 全局注册过滤器 建立文件, 包含所有过滤器方法 ...