We will share two jQuery pop-up boxes with masks to mask jquery.

We will share two jQuery pop-up boxes with masks to mask jquery.

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:

<Div id = "main"> <a href = "javascript: showBg (); "> click here to view the effect </a> <div id =" fullbg "> </div> <div id =" dialog "> <p class =" close "> 
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:
<Script type = "text/javascript"> // display the gray jQuery mask layer function showBg () {var bh = $ ("body "). height (); var bw = $ ("body "). width (); $ ("# fullbg" ).css ({height: bh, width: bw, display: "block"}); $ ("# dialog "). show () ;}// disable the gray jQuery mask function closeBg () {$ ("# fullbg, # dialog "). hide () ;}</script>
Section 2: A simple jQuery mask layer can also be used as a public function to facilitate future use. This tutorial is suitable for beginners.
First, html is provided:
<P class = "showbtn"> <a href = "javascript: void (0 ); "> display mask layer </a> </p> <div id =" bg "> </div> <div class =" box "style =" display: none "> 
The style of the mask layer is 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; position: 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: ""; font-size: 12px; font-weight: 400; color: # ddd ;}. showbtn {font: bold 24px ' ';} # bg {background-color: #666; position: absolute; z-index: 99; left: 0; top: 0; display: none; width: 100%; height: 100%; opacity: 0.5; filter: alpha (opacity = 50);-moz-opacity: 0.5 ;}
Finally, jQuery is used to display and hide the pop-up layer:
$ (Function () {$ (". showbtn "). click (function () {$ ("# bg" ).css ({display: "block", height: $ (document ). height ()}); var $ box = $ ('. box '); $box.css ({// sets the left position of the pop-up layer from left: ($ ("body "). width ()-$ box. width ()/2-20 + "px", // you can specify the top position ($ (window) of the pop-up layer ). height ()-$ box. height ()/2 + $ (window ). scrollTop () + "px", display: "block"}) ;}); // when you click the close button, the mask layer is closed $ (". close "). click (function () {$ ("# bg ,. box "cmd.css (" display "," none ");});});
Conclusion: the idea of implementing the mask using jQuery is to trigger the mask layer when you click the button. The css-level z-index of the pop-up layer is used to cover the entire page, at the same time, the css-level z-index of the pop-up layer is higher than the mask layer, so that the pop-up layer is highlighted. Click the close pop-up layer button to hide the pop-up layer and the mask layer. This method is fast to write, and I will write this code as a public function in the future, which facilitates multiple calls.
The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:

  

 
   
Implementation of JQuery pop-up box positioning
 
   
The jquery-based pop-up prompt box is always in the center of the window (similar to the alert pop-up box)
 
   
JQuery-based pop-up box plug-in
 
   
ShowInfoDialog (success/error/warning/notification/background mask) in the jquery plug-in information pop-up box)
 
   
Jquery. boxy pop-up box (automatically hide/jump next N seconds)
 
   
Introduction to jquery. boxy, a lightweight plug-in the js pop-up box
 
   
JQuery + css + html page mask pop-up box
 
   
Example of jquery pop-up box (1)