Face mask popup is not an unfamiliar topic, the method of implementation is very different, today with jquery implementation page Mask Popup

Page Mask Popup is the most common case, today with jquery implementation Page Mask popup, the main use of technology has JQUERY,CSS and HTML,

The HTML code is as follows:

Copy the Code code as follows:

<div id= "main" ><a href= "JAVASCRIPT:SHOWBG ();" > Click here to see the effects </a>
<div id= "FULLBG" ></div>
<div id= "Dialog" >
<p class= "Close" ><a href= "#" onclick= "CLOSEBG ();" > Close </a></p>
<div> loading, please ....</div> later
</div>
</div>

The CSS code is as follows:

Copy the Code code 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,0,0, 0.4);
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 a {
Color: #fff;
Text-decoration:none;
}

The jquery code is as follows:

Copy the Code code as follows:

<script type= "Text/javascript" >
Show Gray JQuery Mask layer
function Showbg () {
var bh = $ ("body"). Height ();
var bw = $ ("Body"). width ();
$ ("#fullbg"). CSS ({
HEIGHT:BH,
WIDTH:BW,
Display: "Block"
});
$ ("#dialog"). Show ();
}
Turn off the gray jQuery matte
function Closebg () {
$ ("#fullbg, #dialog"). Hide ();
}
</script>

Approximate preview situation:

Preview in IE9

Preview in Firefox

Preview in Chrome