在点击的位置创建一个弹出窗口

Question

我的网站上有一个canvas元素，用户可以在其中选择几个元素。如果有更多选择如何处理选定的东西，我想创建一个带有一些选项的小弹出窗口。不幸的是，我无法将弹出窗口置于点击的相同位置。

我的第一个方法是用div做弹出窗口。 我有一个Div：

    <div id = "popup" style="visibility: hidden">
    text
    </div>

要更改div的状态和位置，请使用以下代码：

    $(popupDiv).offset({ top: mousePos.y, left:  mousePos.x});

不幸的是，div弹出的位置与它应该的位置不相似。

任何想法为什么？

Answer 1

确保您的#popup div为position: absolute，而不是relative。否则，它的偏移量将相对于块元素的绘制位置。

这是一个基本的小提琴：jsFiddle

编辑：应该提到 - 如果您自己未指定absolute，则在使用.offset()方法时，它会自动使用relative。< / p>