How to show a div and move it to the mouse's position on click

Question

I have one link which opens a div and it works fine, but I cannot make it to move to location of mouse click. Code is as follows:

Link:

<a href="#" onclick="show_popup('my_popup')" id="napFilt">Filter</a>

Function:

 function show_popup(id) {               
     if (document.getElementById){ 
         obj = document.getElementById(id); 
         if (obj.style.display == "none") {
             obj.style.display = "";
         } 
     } 
 }

Using JS, how can I make the displayed div move to the position of the mouse click?

A similar question http://stackoverflow.com/questions/3521248/how-do-i-position-a-div-next-to-a-mouse-click-using-jquery — AurA, Oct 05 '12 at 11:38
Yes I would like pure javascript! If it is possible! katspaugh I am looking in bootstrap but would like to know "vanila" solution. — Ivan Marijanović, Oct 05 '12 at 11:51
Folks, he's clearly asking for a plain JS solution. Please stop flagging this as a duplicate of questions surrounding jQuery and other frameworks. — Tim Post, Oct 06 '12 at 16:42

score 0 · Accepted Answer · answered Oct 05 '12 at 12:02

0

Make sure the div you are "spawning" is in the body tag. It sould have "position: absolute;" as css property. Then you do this: http://jsfiddle.net/GSxNx/5/

I leave this pretty uncommented here since i commented source code there. ;) Only one thing: This is NOT! crossbrowser tested. It works though pretty well in FF 16.0 ;)

answered Oct 05 '12 at 12:02

func0der

2,192
1
19
29

Thank you very much. This works very well. I tried it on Chrome and IE 9 and it works very well. Ivan – Ivan Marijanović Oct 05 '12 at 12:25

How to show a div and move it to the mouse's position on click

1 Answers1