The mask is two divs, where the popWindow style div is used to cover the entire page and translucent. The maskLayer is located on the popWindow and is used to display the masked information, for example, "loading ...... "
Copy codeThe Code is as follows:
<Html>
<Head>
<Style type = "text/css">
. PopWindow {
Background-color: # 9D9D9D;
Width: 100%;
Height: 100%;
Left: 0;
Top: 0;
Filter: alpha (opacity = 50 );
Opacity: 0.5;
Z-index: 1;
Position: absolute;
}
. MaskLayer {
Background-color: #000;
Width: 200px;
Height: 30px;
Line-height: 30px;
Left: 50%;
Top: 50%;
Color: # fff;
Z-index: 2;
Position: absolute;
Text-align: center;
}
</Style>
<Script language = "javascript" type = "text/javascript">
Function showDiv (){
Document. getElementById ('popwindow'). style. display = 'block ';
Document. getElementById ('mask'). style. display = 'block ';
}
Function closeDiv (){
Document. getElementById ('popwindow'). style. display = 'none ';
Document. getElementById ('mask'). style. display = 'none ';
}
</Script>
</Head>
<Body>
<Div onclick = "showDiv ()" style = "display: block; cursor: pointer">
Pop-up mask
</Div>
<Div id = "popWindow" class = "popWindow" style = "display: none;">
</Div>
<Div id = "maskLayer" class = "maskLayer" style = "display: none;">
<A href = "#" onclick = "closeDiv ()" style = "cursor: pointer; text-decoration: none;">
Close mask
</A>
</Div>
</Body>
</Html>