jQuery 대화 상자 팝 아웃 - 페이지를 아래로 스크롤 할 때 위치 지정 문제

Question

좋은 시작을 얻은 후 : New google calendar, "pop-out" events, if they don't fit in the defined area, 이제 더 많은 질문과 문제가 있습니다. 여기

// 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입니다 : 여기

가 jQuery를 코드입니다, 여기에

<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이지만, 이것은베이스 ...는 가장 안쪽 <div> 각 루프 (사용자) (그래서 셀당 하나 outer 하나 inner있다)을 반복한다 :

,

다음은 수정하고 싶은 두 가지 문제가있는 스크린 샷입니다.

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