Js+css Simple Implementation div Mask layer display hidden

Http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html

js+css Simple Implementation div Mask layer display hidden1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
2 < HTML xmlns = "http://www.w3.org/1999/xhtml" >
3 < head >
4 < title > DIV CSS Mask layer </title >
5 < SCRIPT language = "javascript" type = "Text/javascript" >
6 function Showdiv () {
7 document.getElementById ("BG"). Style.display = "block";
8 document.getElementById ("Show"). Style.display = "block";
9}
Ten function Hidediv () {
One document.getElementById ("BG"). Style.display = ' None ';
document.getElementById ("Show"). Style.display = ' None ';
13}
</script >
< style type = "Text/css" >
#bg {display:none; position:absolute; top:0%; left:0%; width:100%; height:100%; background-color:b lack; z-index:1001; -moz-opacity:0.7; Opacity:. 70; Filter:alpha (opacity=70); }
#show {display:none; position:absolute; top:25%; left:22%; width:53%; height:49%; padding:8px; bo rder:8px solid #E8E9F7; Background-color:white; z-index:1002; Overflow:auto; }
</Style >
< BODY >
< input ID = "Btnshow" type = "button" value = "show" onclick = "showdiv ();"/>
< div id = "bg" ></div >
< div id = "Show" > Test
< input ID = "Btnclose" type = "button" value = "close" onclick = "hidediv ();"/>
</div >
Num </body >
</HTML >

Copy the code above to the HTML page to see the effect.

The principle is relatively simple, that is, in the page to define a good need to display the div and mask layer of CSS, and then used in the OnClick event, through JS to control the style of two div: display= ' block ' or display= ' none '. You can realize the display and hiding of Div.

Note that the z-index of the two Div, displayed on the top of the div z-index must be larger than the z-index of the mask layer.