jQuery 对话框弹出 - 向下滚动页面时的定位问题

Question

在这里取得了良好的开端：New google calendar, "pop-out" events, if they don't fit in the defined area 之后，我现在有一些进一步的问题需要解决。

这里是 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 = $("<div><a href='#' onmouseover='this.style.cursor=\'pointer\''>See More...</a></div>");
                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：

<style type="text/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;
        }
    </style>

这是 HTML（注意，我实际上使用 Smarty 在这里循环了一些数组，但这是基础......每个循环（用户）重复最里面的 <div>（所以有一个 outer和一个inner，每个单元格）：

<div class="outer"> 
  <div class="inner">
   <div>
       <a href=Tenant.php" style="text-decoration:none">{$tenant.firstName} {$tenant.lastName}</a><br>
       &nbsp;&nbsp;&nbsp;<a href="Message.php">Send Message</a><br>
    </div>
  </div>
</div>

这是一个屏幕截图，有两个我想解决的问题。

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