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