使彈出窗口出現在表格中的超鏈接上

我目前正在使用一個簡單的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); 
}

這是CSS

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

這是我用來彈出DIV的鏈接。

<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，但它仍然是不正確的位置加載。

來源

2012-01-03 wiseman7687

不應該將靜態x/y值傳遞給函數，而應該根據光標的當前位置來做 - 它可以合理地假定光標將靠近當鏈接被點擊時鏈接。 [快速谷歌]（http://www.google.com/search?q=javascript+get+cursor+position）會告訴你如何做到這一點... – DaveRandom 2012-01-03 16:51:40

這是一個偉大的建議戴夫，讓我試試看出。它會給我像素結果嗎？ – wiseman7687 2012-01-03 17:03:17

它將以像素爲單位給出結果，其中視口的左上角爲0/0。 [本頁]（http://dev-notes.com/code.php?q=33）我是否會覺得讓你朝着正確的方向滾動。 – DaveRandom 2012-01-03 17:05:23

如果你可以使用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/

來源

2012-01-03 18:44:32

我有不同的div爲每個超鏈接加載。不幸的是，網站的設置方式..所有這些超鏈接都必須使用id = buttonRed。如果我使用這種方法，是否還有其他方法可以用來區分哪些超鏈接打開哪個div？ – wiseman7687 2012-01-03 18:57:59

只需將一個a添加到選擇器標籤中，如下所示：'$（「a＃buttonRed」）。click（function（e）{'。現在它會將click事件添加到具有該id的所有鏈接。 //jsfiddle.net/mn6rg/1/ – 2012-01-03 19:22:27

不理會我以前的評論，我誤解了你的評論如果你需要單獨的彈出窗口鏈接，你可以給每個鏈接一個不同的類，然後使用該類作爲選擇器：'$（「.link1」）。click（function（）{'。可能有更好的方法，但只是想想我的頭頂。 – 2012-01-03 19:40:53

使彈出窗口出現在表格中的超鏈接上

回答

相關問題