This article describes the method of popping up a full-screen gray-black transparent mask effect by js+CSS. Share it for your reference. The specific analysis is as follows:
There are such effects on many websites. After performing a certain operation, a gray-black translucent mask will pop up. The specified content can be operated on it, such as a login box and other contents. Let’s introduce how to achieve this effect. The code example is as follows:
Copy the code as follows: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//www.VeVB.COM/" />
<title>How to pop up a full-screen gray-black transparent mask effect - Wulin.com</title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.zhezhao
{
width:100%;
height:100%;
background-color:#000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
position:absolute;
left:0px;
top:0px;
display:none;
z-index:1000;
}
.login
{
width:280px;
height:180px;
position:absolute;
top:200px;
left:50%;
background-color:#000;
margin-left:-140px;
display:none;
z-index:1500;
}
.content
{
margin-top:50px;
color:red;
line-height:200px;
height:200px;
text-align:center;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var zhezhao=document.getElementById("zhezhao");
var login=document.getElementById("login");
var bt=document.getElementById("bt");
var btclose=document.getElementById("btclose");
bt.onclick=function()
{
zhezhao.style.display="block";
login.style.display="block";
}
btclose.onclick=function()
{
zhezhao.style.display="none";
login.style.display="none";
}
}
</script>
</head>
<body>
<div id="zhezhao"></div>
<div id="login"><button id="btclose">Click to close</button></div>
<div>Wulin.com welcomes you, <button id="bt">Click to pop up mask</button></div>
</body>
</html>
The above implements the basic mask function. When clicking to pop up the mask, an object will pop up. When clicking to close, the mask effect will disappear. Here is how to achieve the effect:
Implementation principle:
Create a full-screen div, using absolute positioning, so that it can be separated from the document stream, without affecting other elements, and set it to a translucent state. Of course, this transparency can be adjusted at will, and create a login element, which also uses absolute positioning and makes its z-index attribute value greater than the div on the screen, and at this time it will not be covered by the full-screen div. In the default state, the display attribute value of these two divs is none. When clicking the corresponding button, they can change their display attribute value.
Suggestion: Handwritten code as much as possible can effectively improve learning efficiency and depth.
I hope this article will be helpful to everyone's web programming.