Jquery将DIV对齐到链接

Question

我正在尝试显示一个隐藏的 DIV，但我希望它显示在调用它的链接旁边，而不是页面下方。

页面上可能有多个超链接或图像链接，我想将“弹出”div 对齐显示在已单击的链接或图像旁边。

我该怎么做。 ?

这是我正在使用的 jquery：

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
        $("[id$='contact']").click(function(){

    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $("#messagepop").css( {position:"absolute", top:event.pageY, left: event.pageX});
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

我创建了一个 FIDDLE 来展示我目前所拥有的。

谢谢

Answer 1

主要是您通过 id (#messagepop) 而不是类 (.messagepop) 引用 messagepop。

其次，你可以让它出现在链接旁边，通过使用offset()来获取链接的位置：

$(".messagepop").css( {position:"absolute",
                       top:$(this).offset().top,
                       left: $(this).offset().left});

Updated Fiddle