點擊圖片，彈出層查看大圖

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;
}