在一个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开发 ...
随机推荐
- Linux驱动开发2——字符设备驱动
1.申请设备号 #include <linux/fs.h> int register_chrdev_region(dev_t first, unsigned int count, char ...
- ORACLE权限管理—创建只读账号
创建只读用户:grant connect to user; grant create session to user; 1.创建角色 CREATE ROLE SELECT_ROLE 2.给角色分配权限 ...
- mysql 无法存储表情字符 java.sql.SQLException: Incorrect string value: '\xF0\x9F\x90\xBE",...' for column 'XXXX' at row 1
1.变更字段类型 ALTER TABLE api_log MODIFY COLUMN remark longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_uni ...
- Jmeter之Switch Controller
在测试过程中,各种不同的情况需要执行不同的操作,这个时候用if控制器比较麻烦,此时就可以使用Switch Controller代替. 一.界面显示 二.配置说明 1.名称:标识 2.注释:备注 3.S ...
- 阿里云DNS api接口 shell 更改DNS解析
可定时任务检查域名解析,调用alidns.sh更新DNS解析 #!/bin/bash # alidns.sh #https://www.cnblogs.com/elvi/p/11663910.html ...
- 16/7/8_PHP-字符串介绍
不知道为什么慕课网还这个都要介绍.不过还是一个新的知识点. PHP开发中,我们遇到最多的可能就是字符串. 字符串变量用于包含字符串的值. 一个字符串 通过下面的3种方法来定义: 1.单引号2.双引号3 ...
- Charls
1.连接设备 charles--proxy--proxy setting 设置端口号 charles--proxy--ssl proxy setting 设置代理域名 [pc端] charles--p ...
- Python笔记(二十五)_魔法方法_描述符
描述符的属性方法 __get__(self, instance, owner): 用于访问属性,返回属性的值 __set__(self, instance, value): 用于给属性赋值时,返回属性 ...
- 【minicap】基于图像识别的手机端UI自动化测试的截图方式更新
minicap属于STF框架的一个工具,可以高速截图.同步手机屏幕至浏览器等 为什么用minicap截图: 经过试验,截同一个屏幕的一张图,adb shell screencap速度为2.9秒,而 ...
- 在VS Code中使用Jupyter Notebook
一.安装配置 1.在扩展商店中安装官方的Python扩展包 2.系统已经安装了Jupyter Notebook 由于系统上的Python环境是用Anaconda安装的,已经有Jupyter Noteb ...