This chapter introduces how to click a button to pop up a centered window, and this window has a translucent masking layer effect. This effect is more popular nowadays, and of course there are more complex implementation methods, and of course the effect is more gorgeous. , the code introduced below can simply implement this little sister-in-law.
The code is as follows:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>Ant Tribe</title>
<style type="text/css">
#fade {
display:none;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:black;
z-index:1001;
-moz-opacity:0.8;
opacity:.80;
filter:alpha(opacity=80);
}
#light{
display:none;
position:absolute;
top:25%;
left:25%;
width:50%;
height:50%;
padding:16px;
border:3px solid orange;
background-color:white;
z-index:1002;
overflow:auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var linkbt=document.getElementById("linkbt");
var light=document.getElementById('light');
var fade=document.getElementById('fade');
var closebt=document.getElementById("closebt");
linkbt.onclick=function(){
light.style.display='block';
fade.style.display='block';
}
closebt.onclick=function(){
light.style.display='none';
fade.style.display='none';
}
}
</script>
</head>
<body>
<a href="javascript:void(0)" id="linkbt"> Click here to open the window</a>
<div id="light"><a href="javascript:void(0)" id="closebt">Close window</a></div>
<div id="fade""></div>
</body>
</html>
The above code implements our requirements, and the following briefly introduces its implementation process.
1. Implementation principle:
By default, the mask layer and window are hidden and invisible. After clicking on the link, the window and mask layer can be displayed and the mask layer is set to a translucent state. Both elements use absolute positioning and set the z-index attribute value of the centered window to be greater than the mask layer, so that it can be covered on the mask layer. When the close button is clicked, the mask layer and window can be hidden, and the principle is roughly the same.