如何添加關閉按鈕到從縮略圖打開的圖像

Question

我有一個縮略圖圖像列表鏈接到全尺寸圖像的hrefs。我想爲全尺寸圖片添加一個關閉按鈕。我正在考慮爲此使用iframe。這樣做還是你可以想到另一種方式呢？

非常感謝！

HTML

<div class="finishing-touches-contempovertical"> 
    <a id="thumb" class="thumb1" href="images/image.jpg"> 
     <img src="images/image-thumbnail.jpg"/> 
    </a> 
</div> 

CSS

a.thumb1 { 
    position: relative; 
    float: none; 
    margin: 20px 10px 10px 660px; 
    display: block; 
    width: 75px; 
} 

小提琴：

http://jsfiddle.net/zPQ7U/

Answer 1

使用彈出式和jQuery

<style> 
#popup{ 
display: none; 
position: fixed; 
z-index: 1000; 
/* your styles */ 
} 
</style> 

<div class="finishing-touches-contempovertical"> 
    <a id="thumb" class="thumb1" href="images/image.jpg"> 
    <img src="images/image-thumbnail.jpg"/> 
    </a> 
</div> 

<div id="popup"> 
    <img src="" /> 
    <div class="close_popup">X</div> 
</div> 

<script> 
$('a.thumb1').on('click',function(){ // when press link 

    var fullImg = $(this).attr('href') // get full size img url 
    $('#popup img').attr('src', fullImg) // image in popup now has source that you need 
    $('#popup').show() // popup appears 
    return false // do not redirect 

}) 

$('.close_popup').on('click', function(){ 

    $('#popup').hide() // close popup 

}) 
</script> 

http://jsfiddle.net/ha5fH/1/