jQuery對話框彈出窗口 - 向下滾動頁面時的定位問題

在這裏得到一個好的開始之後：New google calendar, "pop-out" events, if they don't fit in the defined area，我現在還有一些問題需要解決。jQuery對話框彈出窗口 - 向下滾動頁面時的定位問題

這裏是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>

下面是一個屏幕截圖，其中包含兩個我想解決的問題。

當我向下滾動頁面（甚至一點點），然後單擊「查看詳細...」 - 彈出是不是在正確的位置。從下圖中可以看出，它應該已經在第一行/第一行了 - 但相反，它降低了很多。不要被愚弄，並認爲它最終與盒子＃4對齊 - 這只是一個巧合，因爲即使表格中的最後一個條目也會在屏幕上具有相同數量的盒子 - 並且不對齊。 There is NO issue if my scroll bar is at the very top of the page.
我想擺脫頂部標題的空間。我只想讓用戶和鏈接列表從頂部開始 - 與彈出框的「X」位於同一行。

Here is the issue I'm seeing

來源

2011-10-07 Shackrock

jQueryUI的相對對話框定位到視口，而不是文件，所以您需要考慮在計算中滾動。使用$(document).scrollTop()：

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

來源

2011-10-07 21:24:14 gilly3

這樣做的位置正確。有沒有辦法讓頁面在點擊我的「查看更多...」鏈接後不滾動到頂部？現在，它強制滾動條回到頂端，而不是保留在同一個地方。此外，我似乎還沒有得到那個標題行消失，沒有奇怪的事情發生在周圍...... – Shackrock

只是一個更新。在打開對話框後，我收到了「滾動停止」問題以停止使用「返回false」。我仍然無法讓標題正常工作...... – Shackrock

我可以使用以下命令來隱藏標題：'.ui-dialog-titlebar {display：none; }'，但是這也隱藏了'X'按鈕。我認爲，如果我能夠爲彈出窗口分配一個ID，我可以使用$（「＃MyID」）。dialog（「close」）使對話關閉，當我點擊任何地方時.... – Shackrock

jQuery對話框彈出窗口 - 向下滾動頁面時的定位問題

回答

相關問題