jQuery Dialog Pop out – 向下滚动页面时的定位问题

在这里开始了一个良好的开端： 新的谷歌日历，“弹出”事件，如果他们不适合定义的区域 ，我现在有一些进一步的问题和问题。

这是jQuery代码：

// Google-Calendar-Style pop-outs $(function() { $(".inner").each(function() { var inner = $(this); var popout = inner.clone().removeClass("inner"); popout.dialog({ autoOpen: false, draggable: false, resizable: false, width: 150 }); var plusMore = $("
See More...
"); plusMore.insertBefore(inner.find("> div:eq(1)")); plusMore.click(function() { var pos = inner.offset(); popout.dialog("option", { position: [pos.left - 6, pos.top - 4] }).dialog("open"); }); }); }); 

这是与此相关的CSS：

  .outer { height: 45px; overflow: hidden; } .inner > h1 { margin: 0; font-size: 1em; } .ui-widget.ui-dialog { font-size: 1em; font-family: inherit; padding: 2px 5px; } .ui-dialog div.ui-dialog-titlebar { padding: 0; background: transparent none; border-width: 0; } .ui-dialog div.ui-dialog-content { padding: 0; }  

这是HTML（注意，我实际上使用Smarty在这里循环一些数组，但这是基础…每个循环（用户）重复内部最多

（所以有一个outer和一个inner ，每个细胞）：

 
 
 
 {$tenant.firstName} {$tenant.lastName}
    Send Message
 
 
  

这是一个屏幕截图，其中包含两个我想解决的问题。

1. 当我向下滚动页面（甚至一点点），然后单击“查看更多…” – 弹出窗口不在正确的位置。 如下图所示，它应该已经超过了第一行/盒子 – 但它却降低了很多。 不要被愚弄，并认为它最终与第4个方框对齐 – 这只是一个巧合，因为即使是表格中的最后一个条目，屏幕上的框也会相同，而不是对齐。 There is NO issue if my scroll bar is at the very top of the page.

2. 我想摆脱顶级冠军的空间。 我只想让用户列表和链接从顶部开始 – 与弹出框的“X”位于同一行。

Answer 1

jQueryUI相对于视口而不是文档定位对话框，因此您需要在计算中考虑滚动。 使用$(document).scrollTop() ：

 popout.dialog("option", { position: [ pos.left - 6 - $(document).scrollLeft(), pos.top - 4 - $(document).scrollTop() ] });