JQuery Mask Layer Effect Example Analysis _ jquery-js tutorial

This article mainly introduces the effects of the jQuery mask layer, and analyzes in detail the principle and related technical details of jQuery's implementation of the mask layer based on the example form, if you need it, you can refer to the examples in this article to analyze the effects of the jQuery mask layer. We will share this with you for your reference. The details are as follows:

Let's take a look at the sample code:

 
 Example | xHTML1.0
 
  
 
 
  
 Click
Close

In fact, the principle of the mask layer is very simple.

One p is used to cover the following content.

One of the most important css styles is

X-index: integer

The larger the value is in the upper layer, the smaller the value is in the lower layer, which can be a negative number.

The above js Code has some errors. The following has been corrected.

// Display layer function showBox (id) {var bH = document. body. offsetHeight; // $ (window ). height (); var bW = document. body. offsetWidth; // $ (window ). width (); if (bH <$ (window ). height () {bH = $ (window ). height () ;}$ ("# full_box" ).css ({width: bW, height: bH, display: "block"}); var objWH = getObjWh ('Dialog '); var tbT = objWH. split ("|") [0] + "px"; var tbL = objWH. split ("|") [1] + "px"; if (id = 'template') {$ ("# p_template "). show ();} else if (id = 'History ') {$ ("# p_history "). show ();} else {$ ("# tree _" + id ). show () ;}$ (window ). scroll (function () {resetBox (id) ;}); $ (window ). resize (function () {resetBox (id) ;});} // reset the layer function resetBox (id) {var full_box = $ ("# full_box" ).css ("display"); if (full_box = 'block') {var bH = document. body. offsetHeight; // $ (window ). height (); var bW = document. body. offsetWidth; // $ (window ). width (); if (bH <$ (window ). height () {bH = $ (window ). height ();} var objWH = getObjWh ('Dialog '); var tbT = objWH. split ("|") [0] + "px"; var tbL = objWH. split ("|") [1] + "px"; $ (". dialog "detail .css ({top: tbT, left: tbL}); $ (" # full_box "detail .css ({width: bW, height: bH });}} // obtain the layer Parameter function getObjWh (obj) {var st = $ (window ). scrollTop (); var sl =$ (window ). scrollLeft (); var ch = $ (window ). height (); var cw = $ (window ). width (); var ob1_=$ ("#" + obj ). height (); var objW = $ ("#" + obj ). width (); var objT = Number (st) + (Number (ch)-Number (ob1_))/2; var objL = Number (sl) + (Number (cw) -Number (objW)/2; return objT + "|" + objL;} // function closeBox (id) {if (id = 'template ') {$ ("# p_template "). hide ();} else if (id = 'History ') {$ ("# p_history "). hide ();} else {$ ("# tree _" + id ). hide () ;}$ ("# full_box "). hide ();}