0

谁能告诉我这段代码有什么问题？我有一个图片库，我想为画廊的每张图片添加一个弹出窗口，但它只在同一张图片上打开。我尝试了许多不同的示例，它们大部分时间仅适用于一个链接，而不适用于所有画廊链接。

点击购物车图标

这是我的小提琴....

 $(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>
4

1 回答 1

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

见小提琴

更新：

使用最新的 Jquery 1.9+on来工作

对于鼠标离开

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

点击关闭

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

见小提琴

于 2013-04-20T18:56:05.367 回答