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

<html> 
<head> 
<title>JavaScript Data Access Test</title> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20topDiv(el)%7B%20%0D%0Avar%20elem%3Ddocument.createElement(%22div%22)%3B%20%0D%0Aelem.className%3D%22top-div%22%3B%20%0D%0A%2F%2F%3D%3D%3D%3D%3D%3D%3D%3D%3Dcreate%20img%20tag%20%0D%0Avar%20img%3Ddocument.createElement(%22img%22)%3B%20%0D%0Aimg.src%3Del.href%3B%20%0D%0Aelem.appendChild(img)%3B%20%0D%0A%2F%2F%3D%3D%3D%3D%3D%3D%3D%3D%3Dcreate%20close%20DIV%20%0D%0Avar%20closeDiv%3Ddocument.createElement(%22div%22)%3B%20%0D%0AcloseDiv.innerHTML%3D%22Close%22%3B%20%0D%0AcloseDiv.onclick%3Dfunction()%7B%20%0D%0Adocument.body.removeChild(elem)%3B%20%0D%0Adocument.body.removeChild(alpha)%3B%20%0D%0A%7D%20%0D%0AcloseDiv.style.position%3D%22absolute%22%3B%20%0D%0AcloseDiv.style.right%3D%222px%22%3B%20%0D%0AcloseDiv.style.top%3D%222px%22%3B%20%0D%0AcloseDiv.style.fontSize%3D%2212px%22%3B%20%0D%0AcloseDiv.style.color%3D%22red%22%3B%20%0D%0AcloseDiv.style.border%3D%221px%20solid%20%23333%22%3B%20%0D%0AcloseDiv.style.backgroundColor%3D%22%23eee%22%3B%20%0D%0AcloseDiv.style.cursor%3D%22hand%22%3B%20%0D%0Aelem.appendChild(closeDiv)%3B%20%0D%0A%2F%2F%3D%3D%3D%3D%3D%3D%3D%3D%3Dappend%20the%20top%20DIV%20to%20body%20%0D%0Adocument.body.appendChild(elem)%3B%20%0D%0Avar%20alpha%20%3D%20alphaDiv(elem)%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20alphaDiv(el)%7B%20%0D%0Avar%20elem%3Ddocument.createElement(%22div%22)%3B%20%0D%0Aelem.className%3D%22alphaDiv%22%3B%20%0D%0Aelem.onclick%3Dfunction(e)%7B%20%0D%0Adocument.body.removeChild(elem)%3B%20%0D%0Adocument.body.removeChild(el)%3B%20%0D%0A%7D%20%0D%0Adocument.body.appendChild(elem)%3B%20%0D%0Areturn%20elem%3B%20%0D%0A%7D%20%0D%0A%0D%0Aonload%3Dfunction()%7B%20%0D%0Avar%20links%3Ddocument.getElementsByTagName(%22a%22)%3B%20%0D%0Afor(var%20i%3D0%2Clen%3Dlinks.length%3Bi%3Clen%3Bi%2B%2B)%7B%20%0D%0Aif(links%5Bi%5D.rel%3D%3D%22Imgbox%22)%7B%20%0D%0Alinks%5Bi%5D.onclick%3Dfunction()%7B%20%0D%0AtopDiv(this)%3B%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<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"> 
<p><a href="http://www.glzy8.com/images/logo.gif" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com%2Fimages%2Flogo.gif" rel="Imgbox">Click here to show the pic one.</a><br> 
<a href="http://dl.glzy8.com/img/imgby/downloadBtn.gif" _ewebeditor_ta_href="http%3A%2F%2Fimg.glzy8.com%2Fimgby%2FdownloadBtn.gif" rel="Imgbox">Click here to show the pic two.</a><br>
<a href="#" _ewebeditor_ta_href="%23">Click me</a> 
</p> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　注意上面的图片地址，大家自己

教程首页更多教程