在一个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{
800px;
height:800px;
border:1px solid #cccccc;
color:red;
font-size: 22px;


}
.filter{
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>