javascript ImgBox透明遮罩层背景图片展示

<html> <head> <title>JavaScript Data Access Test</title> <script type="text/javascript"> function topDiv（el）{ var elem=document.createElement（"div"）; elem.className="top-div"; //=========create img tag var img=document.createElement（"img"）; img.src=el.href; elem.appendChild（img）; //=========create close DIV var closeDiv=document.createElement（"div"）; closeDiv.innerHTML="Close"; closeDiv.onclick=function（）{ document.body.removeChild（elem）; document.body.removeChild（alpha）; } closeDiv.style.position="absolute"; closeDiv.style.right="2px"; closeDiv.style.top="2px"; closeDiv.style.fontSize="12px"; closeDiv.style.color="red"; closeDiv.style.border="1px solid #333"; closeDiv.style.backgroundColor="#eee"; closeDiv.style.cursor="hand"; elem.appendChild（closeDiv）; //=========append the top DIV to body document.body.appendChild（elem）; var alpha = alphaDiv（elem）; } function alphaDiv（el）{ var elem=document.createElement（"div"）; elem.className="alphaDiv"; elem.onclick=function（e）{ document.body.removeChild（elem）; document.body.removeChild（el）; } document.body.appendChild（elem）; return elem; } onload=function（）{ var links=document.getElementsByTagName（"a"）; for（var i=0,len=links.length;i<len;i++）{ if（links[i].rel=="Imgbox"）{ links[i].onclick=function（）{ topDiv（this）; return false; } } } } </script> <style> .alphaDiv{ z-index:100; width:100%; height:100%; opacity:0.5; background:#666666; top:0; left:0; position:absolute; filter:alpha（opacity=50）; } .top-div{ z-index:101; border:1px solid #333; padding:2px; background:#eee; position:absolute; } a{ outline:none; } </style> </head> <body class="body"> Click here to show the pic one.<br> Click here to show the pic two.<br>Click me <br/> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
注意上面的图片地址，大家自己