Изменение позиции div при масштабировании браузера

Question

У меня есть всплывающее окно div, его работа прекрасна и появляется, когда я нажимаю изображение. Теперь, когда я увеличиваю или уменьшаю масштаб, всплывающее окно остается там, где оно постольку, поскольку его позиция абсолютна, когда я меняюсь его родственник, его выкатились в другом месте, в CSS и Javascript ниже:

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

$('.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(); 
      }); 

что мне нужно это Див, чтобы изменить его самостоятельно с источником всплывающего окна в моем случае его образ, когда я масштабирование в/из

спасибо и касается

Answer 1

Это проблема изменения размеров окна, поэтому вам нужно запустить функцию в каждом временном окне. Пример кода ...

$('.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:fixed; вместо position:absolute;. фиксированное положение будет держать поле в том же самом. Если вы используете абсолютное значение, это окно будет увеличиваться при прокрутке страницы. При использовании фиксированного положения используйте левую и правую поля. Нравится

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