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

Question

我的网站上有一个画布元素，用户可以在该元素上选择几件事情。要获得更多选择如何处理所选内容，我想创建一个带有几个选项的小弹出窗口。不幸的是，我无法将弹出窗口放在点击的位置。

我的第一种方法是使用 div 进行弹出窗口。我有一个div：

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

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

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

不幸的是，div 弹出的位置与它应该在的位置不同。

任何想法为什么？

Answer 1

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

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

编辑：应该提到-如果您不指定absolute自己，则在使用该.offset()方法时，它将自动使用relative.