UIダイアログ - pageX pageY位置

Question

私はデータの行数が多い（300以上のテーブル行）データページを構築しました。 私はイメージを持っている各行で、HTML（コンテキストタイプメニュー）を含む小さなUIダイアログを起動します。 ビューポート内のトリガーイメージに問題がない場合は、いずれかをクリックします。 下にスクロールしてトリガーイメージをクリックすると、uiは、クリックした要素ではなく、ページの一番下に常に配置されます。

function showMenu(){ 
$("#modalMenu").dialog("open"); 
return false; 
} 
$(document).ready(function() { 
$('#modalMenu').dialog({autoOpen: false,modal: true,height: 200,width: 200}); 
$('.menu').click(function(e){$('#modalMenu').dialog('option', 'position', [e.pageX,e.pageY]);}); 
$('.menu').click(function(){showMenu();}); 
}); 



<div id="modalMenu"> 
    <a href="">Do Something</a> 
    <a href="">Do Something Else</a> 
</div> 


<img class="menu" src="images/menu trigger.jpg" /> 

** This image is in the first cell of every row 

Answer 1

それがわかりました。 scrollTopをキャプチャし、e.pageYから差し引く必要があります。 スクロール後の位置を示します。

$('.menu').click(function(e){ 
    var y=$(window).scrollTop(); 
    $('#modalMenu').dialog('option', 'position', [e.pageX,(e.pageY-y)]); 
    });