UI对话框 - pageX pageY位置

时间:2012-04-22 18:06:22

标签: jquery jquery-ui

我构建了一个包含许多行数据的数据页面(超过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

1 个答案:

答案 0 :(得分:0)

想出来。需要捕获scrollTop,然后从e.pageY中扣除。 这说明滚动后的位置。

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