UI对话框 - pageX pageY position

问题描述：

我已经构建了一个包含多行数据（超过300个表行）的数据页面。在每一行我都有一个图像触发器一个包含HTML（一个上下文类型菜单）的小型UI对话框。如果我点击任何，如果视口中的触发器图像没有问题。如果向下滚动并单击触发器图像，则ui始终与我的页面底部对齐，而不是我单击的元素。UI对话框 - pageX pageY position

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

您可以在[jsFiddle]（http://jsFiddle.net/）上对此进行演示吗？您提到了表格行，但问题中的示例代码显示没有表格行。除此之外，我怀疑这是['.offset（）']（http://api.jquery.com/offset/）将能够帮助... – andyb 2012-04-23 09:06:43

答

想通了。需要捕获scrollTop，然后从e.pageY中扣除。这是滚动后的位置。

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

UI对话框 - pageX pageY position

相关推荐