在一个div上增加遮罩

最新推荐文章于 2023-12-08 16:42:56 发布

weixin_30399055

最新推荐文章于 2023-12-08 16:42:56 发布

阅读量1.3k

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/zhouyideboke/p/10022277.html

版权

有一个需求是给一个视频增加遮罩我研究了下抽象出来就是给一个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" οnclick="Filter();">弹出遮罩</div>
</div>
<div id="filter" class="filter">
   <div class="close" οnclick="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>

转载于:https://www.cnblogs.com/zhouyideboke/p/10022277.html

weixin_30399055

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在一个div上增加遮罩

有一个需求是给一个视频增加遮罩我研究了下抽象出来就是给一个div增加遮罩原理是：最外层的div使用relative定位然后里面放两个子div 一个是不被遮的另一个是遮罩（用absolute定位），最后用js控制显示状态的变化 <!DOCTYPE html><html><head><meta c...
复制链接

扫一扫