Pop-up window with semi-transparent mask layer effect_javascript skills

This chapter introduces how to click a button to pop up a centered window, and this window has a translucent mask layer effect. This effect is more popular nowadays. Of course, there are more complex implementation methods, and of course the effect is more gorgeous. , the code introduced below can easily implement this.
The code is as follows:

Copy code The code is as follows:

< 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';
}
}



Click here to open the window

Close window

The above code achieves our requirements. Here is a brief introduction to its implementation process.
1. Implementation principle:
In the default state, the mask layer and window are hidden and invisible. When the link is clicked, the window and mask layer can be displayed, and the mask layer can be set to half Transparent 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 cover the mask layer. When the close button is clicked, the mask layer and window can be hidden. The principle is roughly the same.