Передайте TextBox.Value в Label модальной формы. Текст OnClick

Question

Я хочу захватить координаты курсора над изображением в модальной форме при нажатии на изображение, но я не в восторге от JavaScript. Я также хочу, чтобы при нажатии на изображение модальная форма открывалась ONLY . Модальная форма в настоящее время появляется, когда пользователь щелкает в любом месте окна. Бонусные баллы для тех, кто может помочь мне также расположить модальную форму по центру окна!

Любые идеи будут с благодарностью.

Вот что у меня есть:

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

Решение, приведенное ниже, решает все проблемы, с которыми я сталкивался ранее.Мое решение сделать так, чтобы модальная форма была «центрирована», было чем-то вроде хака, но оно вполне соответствовало моей цели.Надеюсь, это может быть полезно для кого-то еще!

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());
            }
        };

Answer 2

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

    // Add the event argument to the handler function to get mouse position
    // then pass that into the launch window function.

    //Put in the DIV id you want to display
    launchWindow('#submitDialog',e);

    $(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 + 'px', 'height': maskHeight + 'px' });

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

        //Set the popup window to center
        // You need the height of your popup to do this.

        var pHeight = $(id).height();
        var pWidth = $(id).width();

        // Check to see if the window will come off the page, because
        // you're not gonna want that.

        var top = ((winH - pHeight) > 0) ? (winH - pHeight) / 2 : 0;
        var left =  ((winW - pWidth) > 0) ? (winW - pWidth) / 2 : 0;

        // If you don't set it to 'px' you may have trouble with some browsers

        box.css('top', top + 'px');
        box.css('left', left + 'px');
    });
});
function launchWindow(id,mouse) {

    var offset = $('#Image').offset();

    // Here are the coordinates you were looking for

    var coords = {
       x: mouse.pageX - offset.left;
       y: mouse.pageY - offset.top;
    }
    //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
    // You need the height of your popup to do this.

    var pHeight = $(id).height();
    var pWidth = $(id).width();

    // Check to see if the window will come off the page, because
    // you're not gonna want that.

    var top = ((winH - pHeight) > 0) ? (winH - pHeight) / 2 : 0;
    var left =  ((winW - pWidth) > 0) ? (winW - pWidth) / 2 : 0;

    $(id).css('top', top + 'px');
    $(id).css('left', left + 'px');

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

    //These are not setting the label text :(
    $('#lblX').text(coords.x);
    $('#lblY').text(coords.y);
}