Jquery+css+html Implementation page Mask pop-up _jquery

The page mask pop-up is the most common case, using jquery to implement the page mask pop-up box, the main technology has JQUERY,CSS and HTML,

The HTML code is as follows:

Copy Code code as follows:

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

The CSS code is as follows:

Copy 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 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 mask
function Closebg () {
$ ("#fullbg, #dialog"). Hide ();
}
</script>

General preview of the situation:

previewing in IE9

Preview in Firefox

Preview in Chrome