JS 弹出层
我想请问各位高手JS或者JQ如何做到点击一张图片弹出一个另外一个层，弹出的层中是一张图片，然后底层边灰色不可操作，点击一下弹出的层，然后弹出层关闭，底层变回壳操作，我对JS,JQ这些不熟悉，请各位大侠指教
------解决方案--------------------
jquery 弹出层插件 百度或者谷歌一下
------解决方案--------------------
直接用jquery插件吧~ 
http://fancybox.net/
------解决方案--------------------
function createScreen(src/*屏蔽层上显示的图像地址*/,parentDom/*屏蔽层的父元素*/){
var div=document.createElement("div");
var screenStyle=getScreenStyle();
parentDom=parentDom
------解决方案--------------------
document.body;
var style={
'width':screenStyle.width+"px",
'height':screenStyle.height+"px",
'position':'fixed',
'left':'0px',
'top':'0px',
'opacity':.6,
'filter':'alpha(opacity=60)',
'zIndex':5000,
'backgroundColor':'black'
}
setStyle(div,style);

var img=new Image();
img.src=src;
//需要在图片加载完毕后创建屏蔽层 否则无法计算图片高宽
img.onload=function(){
style={
'position':'fixed',
'left':(screenStyle.width-img.width)/2+"px",
'zIndex':5001,
'top':(screenStyle.height-img.height)/2+"px"
}
setStyle(img,style);


var text=document.createElement("div");
//text.innerHTML='数据正在加载..';
style={
'position':'fixed',
'zIndex':5002,
'top':parseInt(img.style.top)+parseInt(img.height)+"px",
'left':(screenStyle.width-img.width)/2-20+"px",
'color':'white'
}
setStyle(text,style);


parentDom.appendChild(div);
parentDom.appendChild(img);
parentDom.appendChild(text);
screenDiv=div;
screenImage=img;
screenParent=parentDom;
//当窗口大小发生变化时重新计算
window.onresize=function(){
screenStyle=getScreenStyle();
style={
'width':screenStyle.width+"px",
'height':screenStyle.height+"px"
}
setStyle(div,style);

style={
'left':(screenStyle.width-img.width)/2+"px",
'top':(screenStyle.height-img.height)/2+"px"
}
setStyle(img,style);


style={
'top':parseInt(img.style.top)+parseInt(img.height)+"px",
'left':(screenStyle.width-img.width)/2-20+"px"
}
setStyle(text,style);

}
}
img.onerror=function(){
alert('图片加载错误');
}
img.onabort=function(){
alert('图片加载失败');
}
}