jquery弹出一个静态图片框

页面body代码如下：

<div id="light" class="white_content"> 
   <img id="commonImg"    style="width:500px;height:250px;"/>
   <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"> 
   【关闭】
   </a>
         </div> 

页面jquery代码如下：

function show(){

//先给src属性赋值
$("#commonImg").attr("src","${pageContext.request.contextPath}/img/eye.png");
//再弹出图片框
document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';

}

页面css代码如下：

@charset "GBK";                                     //编码
.black_overlay{
 display: none; 
 position: absolute;
 top: 0%; 
 left: 0%;  width: 100%;                 //阴影框的相对位置
 height: 100%; 
 background-color: black; 
 z-index:1001; 
 -moz-opacity: 0.8;
 opacity:.80;  
 filter: alpha(opacity=80);  } 
 .white_content { 
 display: none; 
 position: absolute; 
 top: 5%;                                         //图片距离顶端的相对距离大小
 left: 20%;                                      //图片距离左边的相对距离大小
 width: 70%;
 height: 40%; 
 padding: 1px; 
 border: 1px solid orange;
 background-color: white;
 z-index:1002; 
 overflow: auto; 
  }