The page mask pop-up box is the most common case. Today, we use jQuery to implement the page mask pop-up box. The main technologies used include JQuery, css, and html,
The html code is as follows:
<Div id = "main"> <a href = "javascript: showBg ();"> click here to view the effect. </a>
<Div id = "fullbg"> </div>
<Div id = "dialog">
<P class = "close"> <a href = "#" onclick = "closeBg ();"> close </a> </p>
<Div> loading... please wait </div>
</Div>
</Div>
The css code is as follows:
Body {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px;
Margin: 0;
}
# Main {
Height: 1800px;
Padding-top: 90px;
Text-align: center;
}
# Fullbg {
Background-color: gray;
Left: 0;
Opacity: 0.5;
Position: absolute;
Top: 0;
Z-index: 3;
Filter: alpha (opacity = 50 );
-Moz-opacity: 0.5;
-Khtml-opacity: 0.5;
}
# Dialog {
Background-color: # fff;
Border: 5px solid rgba (0.4, 0 );
Height: 400px;
Left: 50%;
Margin:-200px 0 0-200px;
Padding: 1px;
Position: fixed! Important;/* floating dialog box */
Position: absolute;
Top: 50%;
Width: 400px;
Z-index: 5;
Border-radius: 5px;
Display: none;
}
# Dialog p {
Margin: 0 0 12px;
Height: 24px;
Line-height: 24px;
Background: # CCCCCC;
}
# Dialog p. close {
Text-align: right;
Padding-right: 10px;
}
# Dialog p. close {
Color: # fff;
Text-decoration: none;
}
The jQuery code is as follows:
<Script type = "text/javascript">
// Display the gray jQuery Mask Layer
Function showBg (){
Var bh = $ ("body"). height ();
Var bw = $ ("body"). width ();
$ ("# Fullbg" ).css ({
Height: bh,
Width: bw,
Display: "block"
}); Www.2cto.com
$ ("# Dialog"). show ();
}
// Disable the gray jQuery mask.
Function closeBg (){
$ ("# Fullbg, # dialog"). hide ();
}
</Script>
General preview:
Preview in ie9
Preview in firefox
Preview in chrome
Author: yilanyoumeng3