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);
}

这就是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所拥有的内容，但它仍未在正确的位置加载。

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/

弹出窗口显示在表格中的超链接上

1 个答案: