Home > Developer > JavaScript
Javascript + CSS to bring up the full screen gray-black transparent mask effect method, css mask
This article describes how to use JavaScript + CSS to bring up a full-screen gray-black transparent mask. Share it with you for your reference. The specific analysis is as follows:
This effect is available on many websites. After some operations are performed, a gray-black translucent mask will pop up, on which you can operate the specified content, for example, you can pop up a login box and the following describes how to achieve this effect. The code example is as follows:
Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> How does CSS bring up a full-screen gray-black transparent mask?-helper's house </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 class = "zhezhao" id = "zhezhao"> </div>
<Div class = "login" id = "login"> <button id = "btclose"> click Close </button> </div>
<Div class = "content"> you are welcome to the help house. <button id = "bt"> click the pop-up mask </button> </div>
</Body>
</Html>
The above provides the basic mask function. When you click to bring up a mask, an object will pop up. When you click to close it, the mask effect disappears. The following describes how to achieve the secondary effect:
Implementation principle:
Create a fully-screen div and use absolute positioning. In this way, it can leave the Document Stream without affecting other elements and set it to a translucent state, of course, this transparency can be adjusted at will. At the same time, a login element can be created, which also uses absolute positioning, and the value of its z-index attribute is greater than the div of the screen, at this time, it will not be covered by the full screen div. By default, the value of the display attribute of the two divs is none. You can click the corresponding button to change their display attribute values.
Suggestion:Writing code as much as possible can effectively improve learning efficiency and depth.
I hope this article will help you with web programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
