使弹出窗口出现在表格中的超链接上

我目前正在使用一个简单的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

使弹出窗口出现在表格中的超链接上

回答

相关问题