Share two of jquery pop-up boxes with masks _jquery

The First : the page mask pop-up box is the most common situation, with jquery to complete the page mask pop-up box, the main use of the skills are jquery,css and HTML.

The following HTML code:

 <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 (); > Closed </a></p>
 <div> is loading, please ....</div>
 </div>
</div> later

CSS code below:

 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,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;
 BAC kg Round: #CCCCCC;
}
#dialog p.close {
 text-align:right;
 padding-right:10px;
}
#dialog p.close A {
 color: #fff;
 Text-decoration:none;
}

jquery code below:

<script type= "Text/javascript" >
 //Show Grey 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>

The second section : Simple to make a jquery mask layer, of course, can also be made public functions, easy to use many times later. This tutorial is suitable for beginners.

First give the HTML:

<p class= "showbtn" ><a href= "javascript:void (0);" > Show Mask layer </a></p>
<div id= "bg" ></div>
<div class= "box" style= "Display:none" >
  
 

The mask layer is styled as follows:

* Box
/* Box{position:absolute;width:600px;left:50%;height:auto;z-index:100;background-color: #fff; border : 1px #ddd solid;padding:1px;
Box H2{height:25px;font-size:14px;background-color: #aaa;p osition:relative;padding-left:10px;line-height:25px; Color: #fff;
Box H2 A{position:absolute;right:5px;font-size:12px;color: #fff;}
. box. list{padding:10px;
box. List li{height:24px;line-height:24px;
box. List Li span{margin:0 5px 0 0;font-family: "Song Body"; Font-size:12px;font-weight:400;color: #ddd;
showbtn {font:bold 24px ' Microsoft Ya-hei ';}
#bg {background-color: #666;p Osition:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:100%;o Pacity:0.5;filter:alpha (opacity=50);-moz-opacity:0.5;}

The last is jquery to enable the display and hiding of the pop-up layer:

$ (function () {
 $ ('. Showbtn '). Click (function () {
 $ ("#bg"). CSS ({
  display: "Block", Height: $ (document). Height ()
 });
 var $box = $ ('. box ');
 $box. css ({
  //Set pop-up layer distance to left
  : ($ ("body"). Width ()-$box. Width ())/2-20 + "px",///
  set the pop-up level from above position top
  : ($ (window). Height ()-$box. Height ())/2 + $ (window). scrolltop () + "px",
  display: "Block"
 }
 ); When you click the Close button, the mask layer closes
 $ (". Close"). Click (function () {
 $ ("#bg,. Box"). CSS ("display", "none");
 })
;

Summary: The idea of using jquery to implement a mask is to trigger the mask layer when the button is clicked, the CSS level of the pop-up layer Z-index the mask layer to cover the entire page, and the CSS level of the pop-up layer z-index higher than the mask layer, so that the pop-up layer is highlighted. Then click to close the pop-up layer button, let the pop-up layer hidden, but also let mask layer hidden. This method of writing is relatively fast, after a short time I will write this code as a common function, so easy to call multiple times.

The above is the entire content of this article, I hope to help you learn.