0

多くのデータ行（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
4

1 に答える 1

0

理解した。scrollTop をキャプチャし、e.pageY から差し引く必要があります。これは、スクロール後の位置を考慮します。

$('.menu').click(function(e){
  var y=$(window).scrollTop(); 
  $('#modalMenu').dialog('option', 'position', [e.pageX,(e.pageY-y)]);
  });
于 2012-04-23T12:19:28.387 に答える