The face mask pop-up box is no longer a strange topic. The implementation methods are similar and varied. Today, we use jQuery to implement the page mask pop-up box. The main technologies used include JQuery, css, and html, if you are interested, you can refer to the following common page mask pop-up box. 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:
The Code is as follows:
Click here to view the effect
Close
Loading. Please wait ....
The css code is as follows:
The 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:
The Code is as follows: