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

UI对话框 - pageX pageY位置

1 个答案: