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

Making a popup appear over a hyperlink in a table

本文关键字：超链接 窗口 一个      更新时间：2023-09-26

我目前正在使用一个简单的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设置的，但它仍然没有在正确的位置加载

如果你可以使用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变量决定了它相对于被点击的链接应该高出多少。显然，你也可以添加一个lefffset变量。我在这里设置了一个示例:http://jsfiddle.net/mn6rg/

相关文章：