将TextBox.Value传递到模式窗体标签.单击时显示文本

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

下面的解决方案解决了我以前遇到的所有问题。我将模态形式设置为"居中"有点麻烦，但它非常适合我的目的。希望这对其他人有用！

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