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