Javascript 所有图像库链接上的Div弹出窗口

有人能告诉我这个代码有什么问题吗？ 我有一个图像库，我想为库中的每个图像添加一个弹出窗口，但它只在同一图像上打开。 我尝试过许多不同的例子，它们大多数时候只对一个链接有效，而不是对所有的库链接有效

点击购物车图标

$（文档）.ready（函数（）{
//鼠标上方的图像弹出
$（“#Gallery2A”）。附加（“”）；
$（this.find（“#gallery2 a.showranks”）.append（“Some Text！”）；
//确保删除图像时不会弹出fancybox
$（'span a'）.bind（'click'，函数（e）{
e、 停止传播（）；
});
$（“.photo link”）。在({
鼠标指针：函数（）{
$（this.find（'span'）.stop（）.delay（100）.fadeIn（200）；
},
mouseleave:function（）{
$（this）.find（'span'）.stop（true）.fadeOut（0）；
}
});
//弹出Div开始
$（函数（）{
$（'a.showranks'）。单击（函数（）{
position=$（this.position（）；
$（'body'）。附加（“”）
$（'popupdiv'）.fadeIn（300）；
$（'popupdiv'）.css（'top'，position.top+17）；
返回false；
});
});
（职能（a）{
jQuery.fn.screencenter=函数（）{
css（“位置”、“绝对”）；
this.css（“top”（$（window.height（）-this.outerHeight（））/2）+$（window.scrollTop（）+“px”）；
this.css（“left”（$（window.width（）-this.outerWidth（））/2）+$（window.scrollLeft（）+“px”）；
归还这个；
}  
})（jQuery）；
//弹出Div-End
}); 

两幅图像中弹出窗口的id相同（id选择器用于指定唯一元素，因此要重复样式时请使用类）。因此，

$（'popupdiv'）。fadeIn（300）应用于最后一个图像中的最后一个popupdiv。使用类
.popupdiv
。另外，您不需要通过JS设置一个最大值。只需在CSS中提供top和left值

CSS

JS

看

更新：

在

上使用最新的Jquery 1.9+进行

操作

留胡子

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

有关详细信息，请单击“关闭”

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

请参见
当我从一堆新提琴中点击篮子时，我在任一图像上都会弹出一个弹出窗口，因此不确定到底是什么问题？是的，但弹出窗口应该出现在单击的图像上。当我点击第一个图像时，弹出窗口显示在第二个图像使用灯箱上。jquery Light box是一个很好的插件。它工作得很好，但是当鼠标悬停在另一个链接[code]$（'popupdiv'）上时，打开的弹出窗口怎么会关闭呢；[/code]非常感谢这很好，我只是添加了一些代码，所以当我单击另一个链接时，前一个链接会在打开新链接之前关闭
[link]如果您在弹出div上，然后移动到另一个，则会触发mouseleave事件，隐藏它，但是如果弹出窗口没有在你的鼠标位置打开，然后去点击另一个链接，我将不得不打开弹出窗口哦，现在看到小提琴了。您有
$（.popupdiv”）.hide（）在
$（'a.showranks'）中。单击（函数（）{
，将其删除。每次单击所有弹出窗口都会隐藏。
$('.popupdiv',$(this)).fadeIn(300);

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

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