点击图片，弹出层查看大图

Jquery:

$(document).ready(function(){
    var small       = $('.small_img'); //小图
    var big_div     = $('#big_div'); //大图弹出层
    var small_size  = $('#small_size'); //显示小图实际尺寸区域
    var big_size    = $('#big_size'); //显示大图实际尺寸区域
    var smallWidth  = small.width(); //小图宽度
    var smallHeight = small.height(); //小图高度
    var bigWidth     = $('.big_img').width(); //大图宽度
    var bigHeight    = $('.big_img').height(); //大图高度
    var small_str    = smallWidth+' X '+smallHeight+' 像素';
    var big_str      = bigWidth+' X '+bigHeight+' 像素';
    small_size.text(small_str);  //显示小图片实际尺寸
    small.click(function(){ //点击显示大图弹出层
        big_div.show();//也可换做big_div.toggle();去除关闭按钮
        big_size.text(big_str);
    });

    $('#close').click(function(){
        big_div.hide();
    });
});

HTML:

<p><img class='small_img' src='img/tutu.png' /></p>
<div id='big_div' style="display:none;position: relative;"><!-- 弹出层 -->
    <p id="close">X</p>
    <p><img class="big_img" src='img/tutu.png' /></p>
</div>

CSS:

.small_img{
    width: 30px;
}
#close{
    position: absolute;
    left: 10px;
    top: -5px;
    font-size: 12px;
    color: red;
    cursor: pointer;
}