<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.t1{
305px;
height: 195px;
background-color: hotpink;
position: fixed;
z-index: 2;
}
.t2{
100%;
background-color: black;
opacity: 0.3;
position: fixed;
top: 0px;
left: 0px;
z-index: 1;
}
</style>
</head>
<body>
<input type="button" id="tan" value="→">
<div class="t1" hidden="hidden"></div>
<div class="t2" hidden="hidden"></div>
</body>
</html>
<script>
tan=document.getElementById("tan");
t1=document.getElementsByClassName("t1")[0];
t2=document.getElementsByClassName("t2")[0];
ah=document.documentElement.clientHeight;
aw=document.documentElement.clientWidth;
t2.style.height=ah+"px";
t1.style.top=ah/2-97.5+"px";
t1.style.left=aw/2-152.5+"px";
tan.onclick=function(){
t1.removeAttribute("hidden");
t2.removeAttribute("hidden");
}
t2.onclick=function(){
t1.setAttribute("hidden","hidden");
t2.setAttribute("hidden","hidden");
}
window.onresize=function(){
ah=document.documentElement.clientHeight;
aw=document.documentElement.clientWidth;
t2.style.height=ah+"px";
t1.style.top=ah/2-97.5+"px";
t1.style.left=aw/2-152.5+"px";
}
</script>