如何在頁面變得更長時爲對話框設置相對位置（滾動條被激活）？

有一個網絡應用程序，它包含一個表單，並設置它啓動一個對話框，其中包含主題標籤文本字段旁邊的信息。每次有人填寫表單並點擊提交，表單的郵件正文（從表單的文本區域）顯示在上方，並在其下方顯示表單。之前，我將它設置爲固定（x，y），使對話框出現在主題標籤旁邊。但是，現在，當頁面變得更長時，該對話框不會出現在我的主題標籤文本字段旁邊。它顯示低得多。如何在頁面變得更長時爲對話框設置相對位置（滾動條被激活）？

下面的代碼找到的位置：

// Finds the position and adds 40px to the left axis. 
function findPosition(obj) { 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
     curleft += 42; 
//  alert ('[' + curleft + ', ' + curtop + ']'); 
     return [curleft,curtop]; 
    } 
}

下面是調用該函數在一個特定的地方顯示一個對話框代碼：

function displayDialog() { 
    var subjectLabel = document.getElementById("myform.subjectLabel"); 
    $("#myDialog").dialog({ 
     open: function(event, ui) { 
      jQuery('.ui-dialog-titlebar-close') 
         .removeClass("ui-dialog-titlebar-close") 
         .html('<span padding-right = "16px;">Close</span>'); 
     }, 
     hide: true, 
     draggable: false, 
     position: findPosition(subjectLabel), 
     closeOnEscape: false 
    }); 
}

如何設置它，所以我的當頁面太長時（需要滾動條時），findPosition（）計算不會計算錯誤？

有沒有辦法設置相對定位總是讓對話框出現在主題標籤的右側40px？

感謝您花時間閱讀本文。

來源

2011-08-09 PacificNW_Lover

您可以簡單地使用CSS完成此操作。通過將您的標籤的CSS設置爲位置：相對並放置一個div與位置：絕對它內部，您可以將容器放在您想要的相對於標籤的任何位置。

請注意，如果您要嘗試定位相對於表格單元格的div，則需要執行一些額外的工作。如果上述不適合你，讓我知道，我可以挖掘完整的解決方案。

.mylabel { 
    position: relative; 
} 
.mylabelfriend { 
    display: none; /* if you don't want these 100% of the time */ 
    position: absolute; 
    left: 40px; 
    top: 0; 
}

來源

2011-08-09 18:30:14 elrasguno

elrasguno，謝謝你的迴應！對不起，你的例子沒有工作。你會碰巧知道如何在我的代碼中集成scrollTop（）和scrollLeft（）函數來使它工作嗎？ –

如何在頁面變得更長時爲對話框設置相對位置（滾動條被激活）？

回答

相關問題