This article mainly shares two jQuery pop-up boxes with masks. The jQuery mask layer is very common in today's websites. if you are interested, please refer to it.
First: The page mask pop-up box is the most common condition. you can use jQuery to complete the page mask pop-up box. the main skills are JQuery, css, and html.
The html code is as follows:
Click here to view the effect
Closed
Loading. please wait ....
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 {bac kg round-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 {bac kg round-color: # fff; border: 5px solid rgba (0.4, 0, 50%); height: 400px; left:; 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; bac kg round: # CCCCCC;} # dialog p. close {text-align: right; padding-right: 10px;} # dialog p. close a {color: # fff; text-decoration: none ;}
The jQuery code is as follows: