팝업 div의 위치가 스크롤로 바뀝니다.

페이지를 클릭하는 위치에서 div를 팝업으로 표시하고 싶습니다. 그래서 나는 다음과 같은 HTML을 가지고있다.팝업 div의 위치가 스크롤로 바뀝니다.

$("#popupButton").live('click', function (e) { 
    leftVal = e.pageX + "px"; 
    topVal = e.pageY + "px"; 
    $('#popupFilterDiv').css({ left: leftVal, top: topVal }).show(); 
});

과 CSS는 다음과 같습니다 :

<HTML> 
<body> 
    <button id="popupButton"> click </button> 
    <div id="popupFilterDiv" class="popupFilterDiv" style="display:none;"> 
      <input type="checkbox" name="statusFilter" value="Active" /> Active <br /> 
      <input type="checkbox" name="statusFilter" value="Expired" /> Expired <br /> 
      </div> 
</body> 
</HTML>

은 내가, 팝업을 웹 브라우저의 폭을 변경할 때

는

.popupFilterDiv 
{ 
    background-color:#FFFFFF; 
    border:1px solid #999999; 
    cursor:default; 
    display:none; 
    margin-top: 10px; 
    position: absolute; 
    text-align:left; 
    z-index:50; 
    padding: 15px 15px 5px; 
    top: 0px; 
    left: 0px; 
}

지금, 모든, 것을 제외하고 잘 작동 div는 popupButton과 멀리 떨어져 있고 popup div의 모양도 바뀌 었습니다. 나는 웹 브라우저의 폭을 변경할 때 내가 기대했던

은 불규칙,

enter image description here

동안이다.

enter image description here

출처

2013-05-13 Edison

당신은 당신의 버튼의 위치를 오프셋 가야한다, 및 디스플레이 팝업을하고, 창 크기에이 함수를 호출하십시오. – Tarun

+1 모든 관련 정보 게시 – SomeShinyObject

그것은 매우 우아되지 않을 수도 있습니다,하지만 당신은 당신의 .popupFilterDiv 클래스 고정 폭 줄 수 : 따라

.popupFilterDiv 
{ 
    /*other relevant styles*/ 
    position: absolute; 
    width: 50px; /* set a fixed width */ 
    top: 0px; 
    left: 0px; 
}

출처

2013-05-13 03:16:23 SomeShinyObject

팝업 div의 위치가 스크롤로 바뀝니다.

답변

관련 문제