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;

}