将TextBox.Value传递给模式窗体Label.Text OnClick

Question

我想在点击图像时以模态形式捕获图像上的光标坐标，但我在JavaScript上吮吸。我还希望模式窗体在点击图像时仅打开。当用户点击窗口中的任何位置时，模式表单当前弹出。任何能够帮助我获得以窗口为中心的模态表单的奖励标志！

任何见解将不胜感激。

这是我到目前为止有：

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