View Full Version : How to get my "pop-up" div to appear where the user clicked?

07-20-2011, 12:31 PM
I have written a little bit of javascript to make a DIV appear like a pop-up window when the user clicks on a link, as follows:

in the HTML:

<a href="javascript:showInfo('You clicked me!')">click me</a>

in the javascript:
infoDiv = 0;

function showInfo(html)
if (infoDiv == 0) //Make sure more than one can't be created at a time.
infoDiv = document.createElement("div");

infoDiv.setAttribute("class", "c3-info");

infoDiv.innerHTML = "<div class='c3-info-content'>" + html + "</div>" + "<div class='c3-info-close-bot'><a href='javascript:hideInfo()'>[close this message]</a></div>";


function hideInfo()
if (infoDiv != 0)
infoDiv = 0;

I then have a CSS fle which I use to format the DIV.

I currently use the CSS to make the div position absolute and make appear in the middle of the screen, when the scroll-bars are all the way up and left.

This works well, but I want to set the position property of the DIV in its style attribute so that it appears at the point where the mouse was clicked (i.e. over the top of the hyperlink).

How do I get the mouse x and y or the click-location? And do I have to compensate for the scrollbar position?

07-20-2011, 11:09 PM
You are correct, once you have the mouse co-ordinates you can open a div there. So here is a link to how to do that:

BUT, you may also need to know the width and length of the display window in case your div goes off screen.