Jquery implements simple mask layer _ javascript skills

This article mainly introduces jquery's simple code for implementing the mask layer, which is rich in content and teaches you how to implement the Mask Layer Effect, if you are interested, refer to the examples in this article to explain the jquery mask layer, including the different style implementations of the mask layer and the mask Implementation of the mask layer. The details are as follows:

I. jQuery implements different styles of the Mask Layer
1.1 Background translucent mask layer style
A black (or other) background is required and must be set to absolute positioning. The following is the css style used in the project:

/* Translucent Mask Layer */# overlay {background: #000; filter: alpha (opacity = 50);/* IE transparency */opacity: 0.5; /* Transparency */display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100; /* The layer here must be greater than the page */display: none ;}

1.2 jQuery implementation mask

/* Display the Mask Layer */function showOverlay () {$ ("# overlay "). height (pageHeight (); $ ("# overlay "). width (pageWidth (); // The first parameter of fadeTo is speed, and the second parameter is transparency. // you can control transparency in multiple ways to ensure compatibility, but it also brings about the trouble of modifying $ ("# overlay "). fadeTo (200, 0.5);}/* hidden cover layer */function hideOverlay () {$ ("# overlay "). fadeOut (200);}/* Current page height */function pageHeight () {return document. body. scrollHeight;}/* Current page width */function pageWidth () {return document. body. scrollWidth ;}

1.3 prompt box
The purpose of the mask is nothing more than making it impossible to operate the content, highlighting the prompt box, and the prompt box can refer to the above preparation, z-index is higher than the mask layer. The main problem is how to control the prompt box centered in the browser.

/* Go to the page center */function adjust (id) {var w = $ (id ). width (); var h = $ (id ). height (); var t = scrollY () + (windowHeight ()/2)-(h/2); if (t <0) t = 0; var l = scrollX () + (wxwwidth ()/2)-(w/2); if (l <0) l = 0; then (id).css ({left: l + 'px ', top: t + 'px'});} // function compute wheight () {var de = document.doc umentElement; return self. innerHeight | (de & de. clientHeight) | document. body. clientHeight;} // The Width function of the browser's viewport using wwidth () {var de = document.doc umentElement; return self. innerWidth | (de & de. clientWidth) | document. body. clientWidth}/* vertical scroll position of the browser */function scrollY () {var de = document.doc umentElement; return self. pageYOffset | (de & de. scrollTop) | document. body. scrollTop;}/* horizontal scroll position of the browser */function scrollX () {var de = document.doc umentElement; return self. pageXOffset | (de & de. scrollLeft) | document. body. scrollLeft ;}

Ii. Jquery super simple mask layer implementation code
In development, to avoid secondary commit, the use of the mask layer is becoming more and more common.
After reading a lot of code, I will share with you the simplest implementation method of the mask layer:
1. Set the style as follows:
CSS code:

Among them: opacity: 0.5; applies to IE,-moz-opacit: 0.5; applies to Firefox; you only need to add it to Firefox and IE.
2. Specify the layer height and width
Js Code