For web application developers, if the background program handles the program for a long time when the user browses the interface, the user will wait for a longer time on the web page, but if there is no more friendly prompt method on the page
(Add to increase the effect of dusting), then the user experience will not be particularly good. Users do not know if they should click on other programs now, and users do not know if they should continue to wait for the web page, or they can click on other pages.
There is a relatively good interaction now, which is to increase the effect of dusting. Like the framework Extjs, the mask() and unmask() functions of Extjs provide a graying effect, and of course jquery also provides this graying method. Here the author hopes that he can
Use native js to achieve your own graying effect. So I made a try myself. Achieved the effect of dusting. Here I am only focusing on implementation. I have not adjusted much about the aesthetics of the page, so the page is not very beautiful. Post the implementation code here.
View code fragments derived to my code fragments on CODE
<!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 = "Loading..."; 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="canceled" onclick="setMask()"/> <input type="button" value="Canceled" onclick="removeMask()"/> <br> <div id="test" style="border:1px solid;width:300px;height:300px"> I'll be covered with dust<input type="button" value="test whether you can click" onclick="alert('OK!')"/> </div> </BODY> </HTML>Explain the important parts of the code.
.maskStyle is a gray layer style
in
View code fragments derived to my code fragments on CODE
filter:alpha(opacity=50); opacity:0.8;
It represents the transparency of the gray layer, and the filter attribute is to be compatible with IE8 browser.
The z-index property sets the stacking order of elements. Elements with higher stacking order will always be in front of elements with lower stacking order.
PS: The effect of dusting needs to be dusting into element to be placed in the div