Bootstrap Modal窗口上的鼠标x位置不正确

Question

我想要使用Bootstrap获取Modal窗口设置内的x和y坐标。模态窗口在图像点击时弹出，但是当我点击模态窗口的任何地方时，它会给我相对于浏览器窗口的坐标而不是模态窗口。

HTML：

<div style="width: 200px; height: 200px;background-color: red; margin: 200px 
auto"> 
    <img src="image/Chrysanthemum.jpg" width="100%" height="100%" alt=""> 
</div> 



<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog" > 
<!-- Modal content--> 
<div class="modal-content" style="width: 700px; height: 600px"> 

    <div class="modal-body"> 
    <img src="" alt="" id="modal-img" width="100%" height="100%"> 
    </div> 

</div> 

JQuery的：

$("img").on("click",(function(){ 

    var imgsrc = $(this).attr("src");    
     $("#modal-img").attr("src",imgsrc); 
     $("#myModal").modal("show");  
})); 



$("#myModal").on("click",function(e){ 
    var relativeX = e.pageX - this.offsetLeft; 
    var relativeY = e.pageY - this.offsetTop; 
    alert(relativeX + " " + relativeY); 
}); 

Answer 1

你#myModal元素是模态的全宽度的背景，所以它总是将有0的offsetTop和offsetLeft;你想要的是将背景中的对话作为目标。

$("#myModal").on("click",function(e){ 
    var dialogElm = $("#myModal .modal-dialog"); 
    var relativeX = e.pageX - dialogElm.offset().left; 
    var relativeY = e.pageY - dialogElm.offset().top; 
    alert(relativeX + " " + relativeY); 
});