问题描述:

Can anybody tell me what is wrong with this code?

I have a image gallery, and I want to add a popup to every image of the gallery, but it only opens on the same image.

I've tried many different examples, and they work most of the time only for one link, not for all the gallery links.

click on the cart icon

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>

网友答案:

You have same id for popup in both images (The id selector is used to specify for a unique element so use classes when you want to repeat styles). So $('#popupdiv').fadeIn(300); applies to the last popupdiv inside the last image. Use a class .popupdiv. Also you dont need to set a top value through JS. Just give top and left value in 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);

See Fiddle

Update:

Use latest Jquery 1.9+ for on to work

For mouseleave

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

For click on close

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

See Fiddle

相关阅读:
Top