jquery implements a simple mask layer
- 2020-11-26 18:41:56
- OfStack
This article explains the jquery mask layer, including different styles of mask layer implementation, mask mask implementation, etc., and shares the details for your reference, as follows
1. jQuery implements different styles of mask layers
1.1 Background translucent mask layer style
A black (or any other) background is required and must be set to absolute positioning. Here is the css style used in the project:
/* A translucent mask layer */
#overlay {
background: #000;
filter: alpha(opacity=50); /* IE The transparency of */
opacity: 0.5; /* transparency */
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100; /* The layer here should be larger than the page */
display:none;
}
1.2 jQuery implementation mask
/* Show the mask layer */
function showOverlay() {
$("#overlay").height(pageHeight());
$("#overlay").width(pageWidth());
// fadeTo The first 1 Is the velocity, and is the 2 Is transparency
// Multiple ways of controlling transparency ensure compatibility, but also bring the problem of modification
$("#overlay").fadeTo(200, 0.5);
}
/* Hidden overburden */
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 to make it impossible to manipulate the contents. Highlight the prompt box, which can be referred to above. z-index is higher than the mask layer. The main problem is to control how the prompt box is centered in the browser.
/* Navigate to the center of the page */
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'});
}
// Height of the browser's viewport
function windowHeight() {
var de = document.documentElement;
return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}
// The width of the browser viewport
function windowWidth() {
var de = document.documentElement;
return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
}
/* The browser scrolls vertically */
function scrollY() {
var de = document.documentElement;
return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
/* Horizontal scrolling position in the browser */
function scrollX() {
var de = document.documentElement;
return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}
2. Jquery super simple mask layer implementation code
In development, the use of a mask layer is becoming more common in order to avoid double commits
After looking at a lot of code, I'd like to share what I think is the simplest way to implement a 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. For IE, -ES37en-ES38en :0.5; For Firefox; You just need to add both and you can use both firefox and IE.
2. Specify the height and width of the layer
js code
<pre class="html" name="code"><script type="text/javascript">
// Compatible with Firefox, IE8
// Show the 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>
In 3. < body > Add the following code, and you'll see the effect
html code
<div id="mask" class="mask"></div>
<a href="javascript:;" onclick="showMask()" > Click me to show the mask layer </a><br />
4. Usage
After ajax submits the form, add the showMask method, and after the data is returned, add hideMask()
Dear friends required can be added to the mask layer with 1 hint message according to your own requirements
3. Release a mask layer implementation of JQuery (mask)
Those of you who have used ExtJs may know that there are many elements of UI integrated in ExtJs that are convenient to use. There are two methods, mask() and unmask(), which add a mask layer and a prompt message implementation to the specified element to increase the customer experience. Recently, when I was working on a project, I found that sometimes in order to use these two methods, I needed to introduce a "huge" Extjs. I thought it was not cost-effective, so I used jquery to implement a relatively simple mask and unmask methods to achieve this effect. As you all know, jquery is an excellent javascript framework, which is not only small in size but also easy to use. Now I gradually replace all the code or components implemented by Extjs in the system with Jquery. Well, not to mention, on my code, these code is based on the documentMask implemented by a friend on the Internet to reform, use 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 1 a Mask Layer, appended 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;background:#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 in and out
$(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();
});
}
});
})();
Here is the code to use as an example
<html>
<head>
<style>
body{
font-size:12px;
}
</style>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
(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 1 a Mask Layer, appended 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;background:#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 in and out
$(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();
});
}
});
})();
</script>
</head>
<body style="width:100%">
test
<div id="test" style="width:200px;height:100px; border:black 1px solid;">
</div>
<a href="#" onclick="$('#test').mask('DIV Layer mask ')">div mask </a>
<a href="#" onclick="$('#test').unmask()"> Shut down div mask </a>
<a href="#" onclick="$(document).mask(' Full screen mask ').click(function(){$(document).unmask()})"> All of the mask </a>
</body>
</html>That's the end of the jquery implementation mask layer, and I hope it helps you with your learning.