在单击时将div浮动到画布上方的代码

Question

I've got an HTML5 canvas element and an event listener for clicks, what I need is to link this up to a floating div that appears right where the user clicks on the canvas. Code suggestions for best way to do this?

I'm tracking the mouse position with:

        var pos = getMousePos(canvas, evt);
        mousePos.x = pos.x;
        mousePos.y = pos.y;

Answer 1

This should do the trick:

HTML:

<div style="position: relative">
    <canvas />
    <div style="position: absolute" id="floatingDiv">Floating div</div>
</div>

Javascript:

var pos = getMousePos(canvas, evt);
mousePos.x = pos.x;
mousePos.y = pos.y;
var floatingDiv = document.getElementById('floatingDiv');
floatingDiv.style.top = pos.y + 'px';
floatingDiv.style.left = pos.x + 'px';