在一个div上增加遮罩
有一个需求是给一个视频增加遮罩 我研究了下 抽象出来就是给一个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上增加遮罩的更多相关文章
- WinForm特效:桌面上的遮罩层
一个窗体特效,帮你了解几个windows api函数.效果:windows桌面上增加一个简单的遮罩层,其中WS_EX_TRANSPARENT 比较重要,它实现了鼠标穿透的功能. using Syste ...
- web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开
https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开 <style typ ...
- Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法EDIT Object.defineProperty(obj, ...
- 如何在一个页面上让多个jQuery
如何在一个页面上让多个jQuery共存呢?比如jquery-1.5和jquery-1.11. 你可能会问,为什么需要在一个页面上让多个jQuery共存?直接引用最新版本的jQuery不行吗? 答案是, ...
- ZeroMQ接口函数之 ：zmq_send – 在一个socket上发送一个消息帧
ZeroMQ 官方地址 :http://api.zeromq.org/4-1:zmq-send zmq_send(3) ØMQ Manual - ØMQ/4.1.0 Name ...
- AIX上增加逻辑卷时报错误0516-787 extendlv: Maximum allocation for logical volume
AIX上增加逻辑卷时报错误0516-787 extendlv: Maximum allocation for logical volume jdelv02 is 512. 在往aix使用chfs -a ...
- 如何在一个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=& ...
- FOR ALL ENTRIES IN 与 INNER JOIN 写在一个SQL上影响效率
SELECT likp~vbeln likp~lfart lips~werks likp~kunnr INTO CORRESPONDING FIELDS OF TABLE it_likps FROM ...
- Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法
Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法 最近在适用Ext JS4开发 ...
随机推荐
- JS 引擎
最早的 JS 引擎是纯解释器,现代 JS 引擎已经使用 JIT(Just-in-time compilation:结合预编译(ahead-of-time compilation AOT)和解释器的优点 ...
- memocached基础操作
cmd->telnet方式链接(控制面板-启动该功能)telenet +ip +(端口号) memcahed 只有 string类型的 整个数据全部都是存在内存里面的 连接数 内存的大小 失效时 ...
- lateral view 使用方法
这个函数相当于拆开行变成列. 可以理解为行转列. select id,order_label from table_bx lateral view explode(split(work_order_l ...
- laravel使用artisan报错SQLSTATE[42S02]: Base table or view not found: 1146
说明你在应用初始化阶段使用到了数据库层面的东西,然而当时数据库不存在这个表/字段,所以会报错 需要在初始化比如 config 目录配置中,使用了数据库,在使用前需要添加一层判断,如果不存在 你需要用到 ...
- CentOS6 破解登录密码
1.重启服务器,在倒数读秒的时候按任意键,就会出现如下界面 2.按e进入grub模式,选中kernel,然后按e进入内核编辑模式 3.进入内核编辑模式后,按空格+1回车(或按空格+single回车)退 ...
- 解决MarkDown打开出现：awesomium web-brower framework This view has crashed
当在windows 8 以上操作系统安装markdown 的时候,可能会出现这样的错误 解决方法: 官网链接:http://markdownpad.com/faq.html#livepreview-d ...
- java_第一年_JDBC（7）
Commons-dbutils是一个开源的JDBC工具类库,对JDBC进行封装,简化编码的工作量,包含的API: org.apache.commons.dbutils.QueryRunner org. ...
- [Codeforces 1201D]Treasure Hunting(DP)
[Codeforces 1201D]Treasure Hunting(DP) 题面 有一个n*m的方格,方格上有k个宝藏,一个人从(1,1)出发,可以向左或者向右走,但不能向下走.给出q个列,在这些列 ...
- 移动端1像素解决方法，根据媒体查询transform缩放
.borderOnePx{ position: relative; } .borderOnePx::after { content: ''; height:1px; background:#000; ...
- django的多语言国际化
介绍 Django 支持国际化,多语言.Django的国际化是默认开启的,如果您不需要国际化支持,那么您可以在您的设置文件中设置 USE_I18N = False,那么Django会进行一些优化,不加 ...