html代码：
注意：body标签中的class属性很关键，不要漏掉。。。
然后就是写js了：
function topDiv(el){
var elem=document.createElement("div");
elem.className="top-div";
//=========生成图片标签
var img=document.createElement("img");
img.src=el.href;
elem.appendChild(img);
//=========生成遮罩层的关闭按钮
var closediv=document.createElement("div");
closeDiv.innerHTML="关闭";
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);
//=========将生成的遮罩层附到 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;
}
}
}
}
加上CSS代码：
完成了，可以在自己的图片上应用这种遮罩效果了。