所有图片库链接上的Div弹出

Question

有人可以告诉我这段代码有什么问题吗？ 我有一个图片库，并且我想为该图库的每个图像添加一个弹出窗口，但只会在同一图像上打开。 我尝试了很多不同的例子，他们大多数时间只为一个链接工作，而不是所有的图库链接。

点击购物车图标

here is my fiddle....

$(document).ready(function(){ 



//Image pop on mouseover 
$("#gallery2 a").append('<span id=myspan class=myspanclass><a id=deleteimg href="#"  class="delete" ></a><a href="#" class="showreranks" id="d" ><img  src="images/insert_to_shopping_cart.png" class="imgOpa" size=20 width=20 border=0></a></span>'); 

$(this).find('#gallery2 a.showreranks').append('<div id="popupdiv" class="closemediv"><div class="closemediv"><a href=""><img src="http://icons.iconarchive.com/icons/kyo-tux/aeon/16/Sign-Close-icon.png" width="16"></a></div><div id="list_preview" class="popupcontent"><p>Some Text!</div></div>'); 




//makes sure when deleting image it does not pops the fancybox 
$('span a').bind('click', function(e) { 
e.stopPropagation(); 

}); 

    $(".photo-link").on({ 

mouseenter: function() { 

$(this).find('span').stop().delay(100).fadeIn(200); 
}, 
mouseleave: function() { 
    $(this).find('span').stop(true).fadeOut(0); 
} 
    }); 





//Popup Div Start 
    $(function() { 
    $('a.showreranks').click(function() { 
    position = $(this).position(); 
    $('body').append('<div class="overlay"></div>') 
    $('#popupdiv').fadeIn(300); 
    $('#popupdiv').css('top', position.top + 17); 
    return false; 
    }); 
    }); 

    (function (a) { 
     jQuery.fn.screencenter = function() { 
    this.css("position","absolute"); 
    this.css("top", (($(window).height() - this.outerHeight())/2) +   $(window).scrollTop() + "px"); 
    this.css("left", (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft() + "px"); 
    return this; 
} 
     })(jQuery); 
     //Popup Div End 


     }); 
     </SCRIPT> 

Answer 1

你有相同的ID在这两个图像弹出（ID选择用于指定一个独特的元素，以便使用类时你想重复样式）。所以$('#popupdiv').fadeIn(300);适用于最后一张图片的最后一个popupdiv。使用类.popupdiv。你也不需要通过JS设置最高值。在CSS中给出top和left值。

CSS

.popupdiv { 
    BORDER-BOTTOM: black 1px solid; 
    POSITION: absolute; 
    BORDER-LEFT: black 1px solid; 
    BACKGROUND-COLOR: #fffff2; 
    WIDTH: 90px; 
    DISPLAY: none; 
    MARGIN-LEFT: 0px; 
    OVERFLOW: hidden; 
    BORDER-TOP: black 1px solid; 
    BORDER-RIGHT: black 1px solid; 
    border-radius: 6px; 
    text-shadow: none; 
    padding: 3px; 
    z-index: 100; 
    left: 0; 
    top: 20px; 
} 

JS

$('.popupdiv',$(this)).fadeIn(300); 

见Fiddle

更新：

使用最新的jQuery的1.9+的on工作

对于鼠标离开

$('.popupdiv', $(this)).on('mouseleave', function() { 
    $(this).hide(); 
}); 

对于单击Close

$('.closemediv').on('click',function(e){ 
    e.stopPropagation(); 
    $(this).closest('.popupdiv').hide(); 
}) 

见Fiddle