<HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <title>Test</title> <Scriptsrc= "Jquery.1.11.0.min.js"></Script> <Scripttype= "Text/javascript"> $(function() {settime_show (); $('#btn'). Click (function () { }); }); functionsettime_show () {setTimeout (show, -); } functionShow () {$ ('. BG'). Show (); $('. Show'). FadeIn ('Slow') //$ ('. Show '). Show (' slow ');setTimeout (Hide,4000); //$ ('. Show '). Slidetoggle (' slow ') //$ ('. Show '). Fadetoggle (' slow '); } functionHide () {//$ ('. BG '). Hide (' slow '); //$ ('. Show '). Hide (' slow '); $('. Show'). FadeOut ('Slow'); $('. BG'). FadeOut ('Slow'); } </Script> <styletype= "Text/css">. BG{Display:None;position:Absolute;Top:0%; Left:0%;width:100%;Height:100%;Background-color:Black;Z-index:1001;-moz-opacity:0.7;Opacity:.;Filter:Alpha (opacity=70); }. Show{Display:None;position:Absolute;Top:25%; Left:22%;width:53%;Height:49%;padding:8px;Border:8px Solid #E8E9F7;Background-color: White;Z-index:1002;text-align:Center; /*Overflow:auto;*/ } </style></Head><Body> <ButtonID= "BTN">Show</Button> <Divclass= "Show"> <imgsrc= "/356.jpg"width= "+"Height= "+"/> </Div> <Divclass= "BG"></Div></Body></HTML>
javascript+css+ div HTML Mask Layer effect