This article explained the jquery mask layer, including the mask layer of different style implementation, mask to achieve mask layer, etc., share for everyone to reference, the specific content as follows
First, jquery to achieve a mask layer of different styles
1.1 Background Translucent mask layer style
Requires a black (and, of course, other) background, and must be set to absolute positioning, following is the CSS style used in the project:
* * Translucent Matte 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 layers here are larger than the page
/display:none;
}
1.2 JQuery Implementation Mask
/* Show matte layer
/function Showoverlay () {
$ ("#overlay"). Height (pageheight ());
$ ("#overlay"). Width (pagewidth ());
Fadeto The first parameter is the speed, the second is transparency
//Multiple control transparency, guarantees compatibility, but also brings the problem of modification
$ ("#overlay"). Fadeto (0.5);
/* Hide Overlay */
function Hideoverlay () {
$ ("#overlay"). fadeout;
/* 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 to make people unable to manipulate the content, highlighting the prompt box, and the cue box can refer to the production above, z-index than the mask layer is higher. The main question is how to control the prompt box in the center of the browser.
* Navigates 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 () + (WindowWidth ()/2)-(W/2);
if (L < 0) L = 0;
$ (ID). css ({left:l+ ' px ', top:t+ ' px '});
}//Browser viewport's height function windowheight () {var de = document.documentelement; return Self.innerheight | | (de && de.clientheight) | |
Document.body.clientHeight;
}//Browser viewport width function windowwidth () {var de = document.documentelement; return Self.innerwidth | | (de && de.clientwidth) | |
Document.body.clientWidth}/* Browser vertical scrolling Position * * Function scrolly () {var de = document.documentelement; return Self.pageyoffset | | (de && de.scrolltop) | |
Document.body.scrollTop;
} * * Browser horizontal scrolling position/function scrollx () {var de = document.documentelement; return Self.pagexoffset | | (de && de.scrollleft) | |
Document.body.scrollLeft; }
Second, jquery super simple mask Layer Implementation code
in the development, in order to avoid two submissions, mask layer is more and more widely used
Read a lot of code, below to share with you what I think the simplest way to achieve the mask layer:
1. The style is set 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, suitable for IE,-moz-opacit:0.5 for Firefox; all you have to do is add it and you can use it under Firefox and IE.
2. Height, and width of the specified layer
JS Code
<pre class= "html" name= "code" ><script type= "Text/javascript" >/
/Compatible Firefox, IE8
//Show mask layer
function Showmask () {
$ ("#mask"). CSS ("height", $ (document). Height ());
$ ("#mask"). CSS ("width", $ (document). width ());
$ ("#mask"). Show ();
Hide Mask layer
function Hidemask () {
$ ("#mask"). Hide ();
</script>
3. Add the following code to the <body> and you can see the effect
HTML code
<div id= "Mask" class= "Mask" ></div> <a "javascript:;" href= "onclick= ()" > Dot I show mask layer Showmask A><br/>
4. How to use
after the AJAX submission form, plus the Showmask method, after the data is returned, add the Hidemask ()
The needs of the parents can be based on their own needs, in the mask layer with some hint information
Third, the release of a jquery Mask layer implementation (mask)
Using ExtJS may be known to integrate a lot of UI elements into ExtJS can be very handy for us to use. There are two methods, mask () and unmask (), which add a mask layer and a hint message implementation to the specified element to increase the customer experience. As a result of the recent project, found that sometimes in order to use these one or two methods need to introduce a relatively "large" ExtJS come in, feel a bit uneconomical, so I use jquery to implement a relatively simple mask, unmask method to achieve this effect. As you know jquery is a good JavaScript framework, not only small and easy to use, I now gradually replace the system with the EXTJS implementation of the code or the formation of all into jquery to achieve. Well, not much to say, on my code, these codes are based on a friend of the online implementation of the Documentmask based on the rectification, the use of more flexible and convenient.
(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]!==window.document) {original=this;
Position=original.position ();
//Create a Mask layer, append to the object 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;backgrou Nd: #ccca "><div style=" Line-height:24px;border: #a3bad9 1px solid;background:white;padding:2px 10px 2px 10px "
> ' +msg+ ' </div></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 effect $ (this). Fadeto (' slow ', op.opacity);
}) return maskdiv;
}, Unmask:function () {var original=$ (document.body); if (thiS[0] && this[0]!==window.document) {original=$ (this[0]);
Original.find ("> Div.maskdivgen"). Fadeout (' Slow ', 0,function () {$ (this). Remove ();
});
}
});
})();
The following is the use of instance code to refer to
The above is the jquery implementation of the mask layer of all the content, I hope to help you learn.
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
