Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    293
    Thanks
    63
    Thanked 8 Times in 8 Posts

    How to get my "pop-up" div to appear where the user clicked?

    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:
    Code:
    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>";
    
          document.body.appendChild(infoDiv);
        }
    }
    
    function hideInfo()
    {
      if (infoDiv != 0)
        {
          document.body.removeChild(infoDiv);
          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?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,307
    Thanks
    23
    Thanked 612 Times in 611 Posts
    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:
    http://www.codelifter.com/main/javas...position1.html

    BUT, you may also need to know the width and length of the display window in case your div goes off screen.
    http://www.javascripter.net/faq/screensi.htm


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •