jQuery的对齐DIV到链接 [英] Jquery Align DIV to Link

问题描述

我想显示隐藏DIV的，但我想它旁边的话来说，没有进一步下跌的页面的链接出现。

I'm trying to show a hidden DIV, but I want it to appear next to the link that calls it, not further down the page.

可能有几个页面上的链接或图片链接，我想allign了弹出分区旁边已经被点击了链接或形象出现。

There may be several hyperlinks or image links on the page and I want to allign the 'popup' div to appear next to the link or image that has been clicked.

我如何做到这一点。 ？

How do I do this. ?

这是我使用jQuery的：

This is the jquery I'm using :

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 显示什么我到目前为止。

I've created a FIDDLE showing what I have so far.

感谢

推荐答案

最主要的是你指的是 messagepop 通过ID（＃ messagepop ）不是类（ .messagepop ）。

The main thing is you are referring to the messagepop by id (#messagepop) not class (.messagepop).

其次，你可以把它旁边显示的链接，通过使用 偏移（） 以获得链接的位置：

Secondly, you can make it appear next to the link, by using offset() to get the link's position:

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

更新小提琴

这篇关于jQuery的对齐DIV到链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！