Home > Article > Web Front-end > Use native js to achieve page mask effect sample code_javascript skills

Use native js to achieve page mask effect sample code_javascript skills

WBOYOriginal: 2016-05-16 16:43:421508browse

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>

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;

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Picture magnifying glass jquery.jqzoom.js usage example with magnifying glass icon_jqueryNext article：Picture magnifying glass jquery.jqzoom.js usage example with magnifying glass icon_jquery

See more

Use native js to achieve page mask effect sample code_javascript skills

Related articles