Home > Developer > JavaScript
For web application developers, when the user browses the interface, if the background program processing process takes a long time, the user will wait for a long time on the webpage, however, if there is no friendly prompt method on the page
(Adding the gray effect), the user experience will not be particularly good, the user does not know whether to click another program, the user does not know whether to continue waiting for the webpage, or can click another page.
Now there is a good interaction, that is, increasing the gray effect. The mask () and unmask () Functions of the js framework Extjs provide the gray effect. Of course, jquery also provides this gray method. I hope I can
Use native js to achieve their own Gray effect. So I tried it myself. The gray effect is achieved. Here I only pay attention to the implementation. I have not adjusted the page aesthetics much, so the page is not very beautiful. Paste the implementation code here.
View the CODE piece derived from my CODE piece 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 = required titem. offsetWidth; divItem. st Yle. 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 e FfectItem = 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 = "Masked" onclick = "setMask () "/> <input type =" button "val Ue = "Unmask" onclick = "removeMask ()"/> <br> <div id = "test" style = "border: 1px solid; width: 300px; height: 300px "> me, Please <input type =" button "value =" test whether you can click "onclick =" alert ('OK! ') "/> </Div> </BODY> </HTML>
Explain what is important in the code.
. MaskStyle is a gray-layer style
Where
View the CODE piece derived from my CODE piece on CODE
filter:alpha(opacity=50); opacity:0.8;
Is the transparency of the gray layer, and the filter attribute is to be compatible with IE 8 browsers.
The z-index attribute sets the stacking sequence of elements. Elements with a higher stacking order are always in front of elements with a lower stacking order.
PS: for the gray effect, you need to place the element to the div.
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
