Pop up window and this window has a translucent mask layer effect
- 2020-03-30 02:23:57
- OfStack
This chapter describes how to click a button to achieve a popup center window, and the window with a translucent mask layer effect, this effect is more popular in the current, of course, there are more complex implementation, of course, the effect is more gorgeous, the following code can be simple to achieve this sisterly.
The code is as follows:
The above code to achieve our requirements, the following is a brief introduction of its implementation process.
I. realization principle:
By default, both the mask layer and the window are hidden and invisible. When the link is clicked, the window and the mask layer are made visible and the mask layer is set to translucent. Both elements use absolute positioning and set the z-index attribute of the center window to be greater than the mask layer so that it can be overlaid on the mask layer. When the close button is clicked, the mask layer and window can be hidden.
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title> The 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 the window </a></div>
<div id="fade""></div>
</body>
</html>
The above code to achieve our requirements, the following is a brief introduction of its implementation process.
I. realization principle:
By default, both the mask layer and the window are hidden and invisible. When the link is clicked, the window and the mask layer are made visible and the mask layer is set to translucent. Both elements use absolute positioning and set the z-index attribute of the center window to be greater than the mask layer so that it can be overlaid on the mask layer. When the close button is clicked, the mask layer and window can be hidden.