Use native js to achieve page mask effect sample code_javascript skills-JS Tutorial-php.cn

Use native js to achieve page mask effect sample code_javascript skills

WBOY

Release： 2016-05-16 16:43:42

Original

1528 people have browsed it

For web application developers, if the background program processing time is long when the user browses the interface, the user's waiting time on the web page will be longer, but if there is no friendly prompt method on the page

(adding gray effect), then the user experience will not be particularly good. The user does not know whether he should click on another program now, and the user does not know whether he should continue to wait for the web page or click on another page.

Now there is a relatively good interaction, which is to add a gray effect. The mask() and unmask() functions of the js framework Extjs provide a graying effect. Of course, jquery also provides this graying method. The author here hopes that he can also

Use native js to achieve your own graying effect. So I tried it myself. Achieved a gray effect. Here I only focus on the implementation. I didn’t adjust much to the beauty of the page, so the page is not very beautiful. Post the implementation code here.

View code snippets on CODE derived to my code snippets

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<style type="text/css"> 
.maskStyle { 
background-color:#B8B8B8; 
z-index:1; 
filter:alpha(opacity=50); 
opacity:0.8; 
position:absolute; 
text-align:center; 
color:blue; 
font:bold 1em "宋体",Arial,Times; 
height:25px; 
font-weight:bold; 
overflow:hidden; 

} 
</style> 
</HEAD> 
<script type="text/javascript"> 
function creatMaskLayer(effectItem,showText) { 
divItem = document.createElement("div"); 
divItem.className="maskStyle"; 
divItem.style.lineHeight=effectItem.offsetHeight+"px"; 
divItem.innerText=showText; 
divItem.style.width=effectItem.offsetWidth; 
divItem.style.height=effectItem.offsetHeight; 
divItem.style.top=effectItem.offsetTop; 
divItem.style.left=effectItem.offsetLeft; 
return divItem; 
} 
function setMask() { 
var effectItem = document.getElementById("test"); 
var existMaskItem = findMaskItem(effectItem); 
if(existMaskItem) { 
return; 
} 
var showText = "加载中..."; 
effectItem.appendChild(creatMaskLayer(effectItem,showText)); 
} 
function removeMask() { 
var effectItem = document.getElementById("test"); 
var maskItem = findMaskItem(effectItem); 
if(maskItem) { 
effectItem.removeChild(maskItem); 
} 
} 
function findMaskItem(item) { 
var children = item.children; 
for(var i=0;i<children.length;i++) { 
if("maskStyle"==(children[i].className)) { 
return children[i]; 
} 
} 
} 
</script> 
<BODY> 
<input type="button" value="蒙灰" onclick="setMask()"/> 
<input type="button" value="取消蒙灰" onclick="removeMask()"/> 
<br> 
<div id="test" style="border:1px solid;width:300px;height:300px"> 
蒙灰我吧 
<input type="button" value="测试是否还能点击" onclick="alert('OK!')"/> 
</div> 
</BODY> 
</HTML>

Copy after login

Explain the more important parts of the code.

.maskStyle is the style of the gray layer

Which
View code snippets on CODE Derived to my code snippets

filter:alpha(opacity=50); 
opacity:0.8;

Copy after login

represents the transparency of the gray layer, and the filter attribute is for compatibility with IE8 browser

The z-index attribute sets the stacking order of elements. Elements with a higher stacking order will always appear in front of elements with a lower stacking order.

PS: For graying effect, you need to put the element to be grayed into a div