Home > Developer > JavaScript
Jquery implements a simple mask layer, and jquery implements a mask
This article describes the jquery mask layer, including different style implementations of the mask layer and 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:
<style type="text/css"> .mask { position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 1002; left: 0px; opacity:0.5; -moz-opacity:0.5; } </style>
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
<Pre class = "html" name = "code"> <script type = "text/javascript"> // compatible with Firefox and IE8 // display mask layer function showMask () {$ ("# mask" ).css ("height", $ (document ). height (); $ ("# mask" ).css ("width", $ (document ). width (); $ ("# mask "). show () ;}// hide the mask layer function hideMask () {$ ("# mask "). hide () ;}</script>
3. Add the following code to <body> to view the effect.
Html code
<Div id = "mask" class = "mask"> </div> <a href = "javascript:;" onclick = "showMask () "> Click Show mask layer </a> <br/>
4. Usage
Add the showMask method after submitting the form in ajax. After the data is returned, add hideMask ()
You can add some tips on the mask layer as needed.
3. Release a JQuery mask layer implementation (mask)
If ExtJs is used, you may know that many UI elements are integrated in ExtJs, which makes it easy for us to use. There are two methods, mask () and unmask (). These two methods add a mask layer and a notification message implementation on the specified element to improve the customer experience. Recently, when I was working on a project, I found that sometimes I need to introduce a relatively "large" Extjs to use these two methods, which is a bit uneconomical, therefore, jquery is used to implement a simple mask and unmask method to achieve this effect. As we all know, jquery is an excellent javascript framework, which is not only small but also easy to use. Now I gradually replace all or all the Code implemented by Extjs IN THE SYSTEM WITH Jquery for implementation. Well, I don't know much about my code. These codes are modified based on the documentMask implemented by a friend on the Internet. They are more flexible and convenient to use.
(Function () {$. extend ($. fn, {mask: function (msg, maskDivClass) {this. unmask (); // parameter var op = {opacity: 0.8, z: 10000, bgcolor: '# ccc'}; var original = $ (document. body); var position = {top: 0, left: 0}; if (this [0] & this [0]! Please specify your own Doc ument) {original = this; position = original. position () ;}// create a Mask layer and append it to the var maskDiv =$ ('<div class = "maskdivgen"> </div>'); maskDiv. appendTo (original); var maskWidth = original. outerWidth (); if (! MaskWidth) {maskWidth = original. width ();} var maskHeight = original. outerHeight (); if (! MaskHeight) {maskHeight = original. height ();} maskDiv.css ({position: 'absolute ', top: position. top, left: position. left, 'z-Index': op. z, width: maskWidth, height: maskHeight, 'background-color': op. bgcolor, opacity: 0}); if (maskDivClass) {maskDiv. addClass (maskDivClass);} if (msg) {var msgDiv =$ ('<div style = "position: absolute; border: # 6593cf 1px solid; padding: 2px; background: # ccca "> <div style =" line-h Eight: 24px; border: # a3bad9 1px solid; background: white; padding: 2px 10px 2px 10px "> '+ msg +' </div> '); msgDiv. appendTo (maskDiv); var widthspace = (maskDiv. width ()-msgDiv. width (); var heightspace = (maskDiv. height ()-msgDiv. height (); msgDiv.css ({cursor: 'wait', top :( heightspace/2-2), left :( widthspace/2-2)});} maskDiv. fadeIn ('fast ', function () {// fade in and fade out effect $ (this ). fadeTo ('low', op. opacity);}) return MaskDiv ;}, unmask: function () {var original =$ (document. body); if (this [0] & this [0]! Required parameter Doc ument) {original =$ (this [0]);} original. find ("> div. maskdivgen "). fadeOut ('low', 0, function () {$ (this ). remove ();});}});})();
The following is an example code for your reference.
<Html>The above is all about jquery's implementation of the mask layer. I hope it will be helpful for your learning.
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
