テーブル内のハイパーリンク上にポップアップを表示させる

Question

現在、単純なJavaScriptコードを使用して、テーブルのハイパーリンクをクリックすると表示されるデータのポップアップを表示しています。

ただし、リンクの近くにポップアップを表示することはできません。このアクションを実行できるスクリプトの提案や改善されたバージョンはありますか？ jQueryもオプションです。 おかげで、ここに私の現在のjavascriptのコードです：

function createPopup(x, y, divID) { 
    var p = document.getElementById(divID); 
    p.style.display="block"; 
    p.style.Left = x; 
    p.style.Top = y; 
    document.body.appendChild(divID); 
} 

そして、これはこれは私がdiv要素をポップアップするために使用するリンクであるCSS

.popup { 
    background-color: #FFFFFF; 
    border: thin solid #000000; 
    color: black; 
    display: none; 
    font-size: 11px; 
    height: auto; 
    padding: 10px; 
    position: absolute; 
    width: 300px; 
} 

です。

<a id=buttonRed href="javascript:createPopup(\'-40px\', \'' . (-15 + ($resultCounter * 10)) . 'px\', \'Name' . $id . '\');"> 

私がデータを動的に引き出すのは、データが動的であることがわかります。

ポップアップは、ハイパーリンクの近くにポップアップが表示されないという事実以外はうまく機能します。

提案？

更新されたコード::

<script> 
    window.onload = init; 
    function init() { 
     if (window.Event) { 
      document.captureEvents(Event.MOUSEMOVE); 
     } 
     document.onmousemove = getCursorXY; 
    } 

    function getCursorXY(e) { 
     document.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); 
     document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 
    } 

    function createPopup(divID) { 
     var p = document.getElementById(divID); 
     p.style.display="block"; 
     p.style.Left = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);; 
     p.style.Top = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);; 
     document.body.appendChild(divID); 
    } 
</script> 

これは、私はjavascriptのために持っているものですが、それは正しい場所にロードされていません。

Answer 1

代わりにJQueryを使用することができれば、クリックしたリンクのオフセットを取得してポップアップのCSSに追加することができます。このような何か：

$("#buttonRed").click(function (e) { 
    var offset = $(this).offset(); 
    var topOffset = 35; 
    $(".popup").css('left',offset.left);  
    $(".popup").css('top',offset.top - topOffset); 
    $(".popup").css('display','block'); 
}); 

topOffset変数は、それがクリックしたリンクに関してどうあるべきかを決定する非常に高いです。また、明らかにleftOffset変数を追加することもできます。 http://jsfiddle.net/mn6rg/