Question

I want to capture the cursor coordinates over an image in a modal form when the image is clicked but I’m suck on the javascript. I also want the modal form to open ONLY when the image is clicked. The modal form currently pops up when the user clicks anywhere in the window. Bonus marks for anyone who can help me get the modal form centered in the window as well!

Any insights will be greatly appreciated.

Here is what I have so far:

HTML

<a onmouseover="document.body.style.cursor='crossHair'" 
    onmouseout="document.body.style.cursor='default'" 
    onmousemove="getXY(event)">
    <img id="Image" src="../Images/TestImage.jpg" alt=""/></a><br/><br/>

X = <input type="text" id="xVal" size="1" readonly="true"/> &nbsp;
Y = <input type="text" id="yVal" size="1" readonly="true"/><br/><br/>

<div id="mask"></div>
<div id="container">
<div id="submitDialog" class="window"><br />

X-coordinate:<asp:Label ID="lblX" runat="server"></asp:Label><br/>
Y-coordinate:<asp:Label ID="lblY" runat="server"></asp:Label><br/>

Javascript

  function getXY(e) {
        var txtX = document.getElementById("xVal");
        var txtY = document.getElementById("yVal");

        MouseX = (e).offsetX;
        MouseY = (e).offsetY;

        txtX.value = MouseX;
        txtY.value = MouseY;
    }

$(document.getElementById('#Image')).click(function() {

        launchWindow('#submitDialog');

        $(window).resize(function() {

            var box = $('#container .window');

            //Get the screen height and width
            var maskHeight = $(document).height();
            var maskWidth = $(document).width();

            //Set height and width to mask to fill up the whole screen
            $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

            //Get the window height and width
            var winH = $(document).height();
            var winW = $(document).width();

            //Set the popup window to center
            box.css('top', winH / 2 - winH);
            box.css('left', winW / 2 - winW / 2);
        });
    });

    function launchWindow(id) {

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(document).width();

        //Get the window height and width
        var winH = $(document).height();
        var winW = $(document).width();

        //Set heigth and width to mask to fill up the whole screen 
        //and mask position
        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
        $('#mask').css({ 'top': 0, 'left': 0});

        //transition effect     
        $('#mask').fadeIn(500);
        $('#mask').fadeTo("fast", 0.8);

        //Set the popup window to center
        $(id).css('top', winH / 2 - winH);
        $(id).css('left', winW / 2 - winW / 2);

        //transition effect
        $(id).fadeIn(500);

        //These are not setting the label text :(
        $('#lblX').text($('#xVal').val());
        $('#lblY').text($('#yVal').val());
    }

CSS

#mask 
{
   position:absolute;
   z-index:9000;
   background-color:#000;
   display:none;
}

#container .window 
{
  position:relative;
  width:300px;
  height:490px;
  display:none;
  z-index:9999;
  padding:20px;
  padding-bottom: 40px;
  background-color: white;
  color:black;
}

#container 
{
  position: relative;
  width: 0px;
  height: 0px;
}

Answer 1

The solution below addresses all of the issues I was having previously. My fix to get the modal form to be “centered” was a bit of a hack but it suited my purpose well enough. Hopefully this can be useful to someone else out there!

HTML

<a id="imageAnchor" onmouseover="document.body.style.cursor='crossHair'"
    onmouseout="document.body.style.cursor='default'" onmousemove="getXY(event)">
       <img id="Image" src="../Images/TestImage.jpg" alt=""/></a><br/><br/>

X = <input type="text" id="xVal" size="2" readonly="true"/> &nbsp;
Y = <input type="text" id="yVal" size="2" readonly="true"/><br/><br/>

<div id="mask"></div>
<div id="container">
<div id="submitDialog" class="window">

X-coordinate:<asp:Label ID="lblX" runat="server"></asp:Label><br/>
Y-coordinate:<asp:Label ID="lblY" runat="server"></asp:Label><br/>

<asp:HiddenField id="xCo" runat="server"/>
<asp:HiddenField id="yCo" runat="server"/>

Javascript

function getXY(e) {
            var txtX = document.getElementById('xVal');
            var txtY = document.getElementById('yVal');

            //hack for firefox - it doesn't like the offsetx/y property
            if (navigator.userAgent.indexOf("Firefox") != -1) {
                MouseX = e.pageX - document.getElementById("Image").offsetLeft;
                MouseY = e.pageY - document.getElementById("Image").offsetTop;
            }
            else {
                MouseX = e.offsetX;
                MouseY = e.offsetY;
            }

            txtX.value = MouseX;
            txtY.value = MouseY;
        }

        $(document).ready(function() {
            $('#imageAnchor').click(function(e) {
                    launchWindow(e);
            });
        });

        function launchWindow(click) {

            //Get the screen height and width
            var maskHeight = $(document).height();
            var maskWidth = $(document).width();

            //Get the window height and width
            var winH = $(document).height();
            var winW = $(document).width();

            //Set height and width to mask to fill up the whole screen 
            //and mask position
            $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
            $('#mask').css({ 'top': 0, 'left': 0 });

            //transition effect     
            $('#mask').fadeIn(500);
            $('#mask').fadeTo("fast", 0.8);

            var window = $(document);
            var body = $(body);
            var element = $('#submitDialog');

            //Set the popup window to center
            $('#submitDialog').css('top',50);
            $('#submitDialog').css('left', window.scrollLeft() + Math.max(0, 
                window.width() - element.width()) / 2);

            //transition effect
            $('#submitDialog').fadeIn(500);

            if (click) {

                if (navigator.userAgent.indexOf("Firefox") != -1) {
                    MouseX = (click.originalEvent).pageX - 
                        document.getElementById("Image").offsetLeft;
                    MouseY = (click.originalEvent).pageY - 
                        document.getElementById("Image").offsetTop;
                }
                else {
                    MouseX = (click.originalEvent).offsetX;
                    MouseY = (click.originalEvent).offsetY;
                }

                $('#ctl00_MainContent_lblX').text(MouseX);
                $('#ctl00_MainContent_lblY').text(MouseY);

                //store coordinates in hidden fields & clear InvalidInput textbox
                $('#ctl00_MainContent_xCo').val(MouseX);
                $('#ctl00_MainContent_yCo').val(MouseY);            
            }
            else {
                var hiddenX = $('#ctl00_MainContent_xCo');
                var hiddenY = $('#ctl00_MainContent_yCo');

                $('#ctl00_MainContent_lblX').text(hiddenX.val());
                $('#ctl00_MainContent_lblY').text(hiddenY.val());
            }
        };