如何为从缩略图打开的图像添加关闭按钮

Question

我有一个缩略图图像列表，它们包含一个链接到完整尺寸图像的href。 我想在全尺寸图片上添加一个关闭按钮。 我当时正在考虑使用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/