Home > Developer > JavaScript
If not, you can look at the following simple example.
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> after a window is displayed, the following layers cannot be operated </title>
<Script>
Function show () // display the hidden layer and pop-up layer
{
Var hideobj = document. getElementById ("hidebg ");
Hidebg. style. display = "block"; // display the hidden layer
Hidebg. style. height = document. body. clientHeight + "px"; // set the height of the hidden layer to the current page height.
Document. getElementById ("hidebox"). style. display = "block"; // display the pop-up layer
}
Function hide () // remove the hidden layer and pop-up layer
{
Document. getElementById ("hidebg"). style. display = "none ";
Document. getElementById ("hidebox"). style. display = "none ";
}
</Script>
<Style>
Body {margin: 0px; padding: 0px; text-align: center ;}
# Hidebg {position: absolute; left: 0px; top: 0px;
Background-color: #000;
Width: 100%;/* set the width to 100% so that the hidden background layer can overwrite the original page */
Filter: alpha (opacity = 60);/* set the transparency to 60% */
Opacity: 0.6;/* set the transparency to 60% in non-ie browsers */
Display: none;/* http://www.jb51.net */
Z-Index: 2 ;}
# Hidebox {position: absolute; width: 400px; height: 300px; top: 200px; left: 30%; background-color: # fff; display: none; cursor: pointer; z-Index: 3 ;}
# Content {text-align: center; cursor: pointer; z-Index: 1 ;}
</Style>
</Head>
<Body>
<Div id = "hidebg"> </div>
<Div id = "hidebox" onClick = "hide ();"> click Close </div>
<Div id = "content" onClick = "show ();"> click to try </div>
</Body>
</Html>
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
