Bootstrap Modalウィンドウのマウスx y位置が正しくありません

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要素はモーダルの全幅の背景なので、常にoffsetTopに0を持っているだろうし、 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); 
});