javascript ImgBox透明遮罩层背景图片展示
JavaScript Data Access Test
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
.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;
}
Click here to show the pic one.
Click here to show the pic two.
Click me
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
注意上面的图片地址，大家自己