Question

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

点击购物车图标

 $(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中给出顶部和左侧值。

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工作

对于mouseleave

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

点击关闭

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

请参阅Fiddle

Div弹出所有图库链接

1 个答案: