브라우저를 확대/축소 할 때 div 위치가 변경됨

Question

팝업 div가 작동하고 이미지를 클릭하면 팝업이 나타나고 확대 또는 축소 할 때 팝업 div는 위치가 절대적 일 때 그대로 유지됩니다 나는 그 다른 장소에서 터지는, 상대적으로 CSS 그것을 변화하고 있고 자바 스크립트는 다음과 같습니다 :

.set_pop{ 
       position:absolute; 
       margin-right: 50px; 
       margin-top:10px; 
       width:100px; 
       -webkit-box-shadow: #666 0px 2px 3px; 
       -moz-box-shadow: #666 0px 2px 3px; 
       box-shadow: #666 0px 2px 3px; 
       border-radius:5px; 
       -moz-border-radius:5px; 
       -webkit-border-radius:5px; 
       z-index:10; 
       background-color: #ffffff; 
       color:#000; 
      } 

JS

CSS

$('.settings img').live('click', function(event){ 
       event.stopPropagation(); 
       var popup_div = $('.set_pop'); 
       var obj = $(this); 
       var offset = obj.offset(); 

       var new_top = offset.top + 30; 

       var new_left = offset.left; 

       new_left = new_left - (popup_div.width()/2); 
       new_left = new_left + (obj.width()/2); 

       popup_div.css('left', new_left + 'px'); 
       popup_div.css('top', new_top + 'px'); 

       popup_div.show(); 
      }); 

이 내 경우의 이미지를 팝업의 소스와 그것을 자기의 위치를 ​​변경하는 div에 내가해야 할 것은, 내가 입/출력

감사를 확대하고

Answer 1

이 창 크기 조정의 문제에 관해서입니다 때, 따라서 창 크기가 조정될 때마다 함수를 실행해야합니다. 내가 이미지를 클릭에 ID를 저장하는 숨겨진 필드를 가지고있는 샘플 코드 ...

$('.settings img').live('click', function(event){ 
    $('#hidid').attr('value', $(this).attr('id'));    
    showDiv(this.id); 
}); 

window.onresize = function() { 
    var id = $('#hidid').attr('value'); 
    showDiv(id); 
}; 

function showDiv(id) { 
    var popup_div = $('.set_pop'); 
    var obj = $('#'+id); 
    var offset = obj.offset(); 

    var new_top = offset.top + 30; 
    var new_left = offset.left; 
    new_left = new_left - (popup_div.width()/2); 
    new_left = new_left + (obj.width()/2); 

    popup_div.css('left', new_left + 'px'); 
    popup_div.css('top', new_top + 'px'); 
    popup_div.show(); 
} 

및 HTML 부분 ... 당신은 당신의 자신의 방법으로 저장할 수 있습니다. 그리고 btw 또한 각 이미지에 id를 사용했습니다. 그것은 당신을 도울 수 있습니다 :

Answer 2

position:absolute; 대신 position:fixed; 시도하십시오. 고정 된 위치는 상자를 동일하게 유지합니다. 당신이 페이지를 아래로 스크롤 할 때 절대 상자를 사용하면 절대 사용하고 있습니다. 위치를 사용하는 경우 여백에 좌우로 고정 사용하십시오. 이와 같이

.set_pop{ 
    position:fixed; 
    right: 50px; 
    top:10px; 
    width:100px; 
    -webkit-box-shadow: #666 0px 2px 3px; 
    -moz-box-shadow: #666 0px 2px 3px; 
    box-shadow: #666 0px 2px 3px; 
    border-radius:5px; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    z-index:10; 
    background-color: #ffffff; 
    color:#000; 
}