페이지가 길어질 때 대화 상자의 상대 위치를 설정하는 방법 (스크롤 막대가 활성화되어 있습니까?)

Question

양식으로 구성되어 있고 제목 라벨 텍스트 필드 옆에 정보가 포함 된 대화 상자를 시작하도록 설정 한 웹 앱이 있습니다. 누군가가 양식을 채우고 제출을 클릭 할 때마다 양식의 텍스트 영역에있는 양식의 메시지 본문이 맨 위에 표시되고 양식이 그 아래에 표시됩니다. 전에 대화 상자가 제목 레이블 옆에 나타나도록 고정 된 것으로 설정했습니다 (x, y). 그러나 이제 페이지가 길어지면 내 제목 라벨 텍스트 필드 옆에 대화 상자가 나타나지 않습니다. 훨씬 더 낮게 표시됩니다. 수 나는 나의 그것을 설정하는 방법

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

:

여기

// 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]; 
    } 
} 

특정 장소에서 대화 상자를 표시하려면이 함수를 호출하는 코드입니다 : 여기

는 위치를 찾기 위해 코드의 페이지가 너무 길 때 (스크롤 막대가 필요할 때) findPosition() 계산이 잘못 계산되지 않습니까?

상대 위치 지정을 설정하여 대화 상자가 항상 제목 레이블의 40px 오른쪽에 나타나게 할 수 있습니까?

시간을내어 읽어 주셔서 감사합니다.

Answer 1

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; 
}