Абсолютное положение после масштабирования

Question

У меня есть divs с class="myDiv". Мне нужно сделать эту логику: по мыши, я хочу показать всплывающее окно в середине div.

Для этого у меня есть следующие:

$(".myDiv").mouseover(function() { 
    positionDiv($(this).position().left + $(this).width()/2, $(this).position().top + $(this).height()/2); 
}); 

function positionDiv(xPosition ,yPosition) { 
    $("#popupWindow").css("left", xPosition + "px"); 
    $("#popupWindow").css("top", yPosition + "px"); 
    $("#popupWindow").show(); 
} 

CSS-:

.popupWindow{ 
    position:absolute; 
    width:313px; 
    height:383px; 
    display:none; 
} 

Это положение всплывающего окна в середине DIV на мыши над. В этот момент все отлично работает.

Однако, если сайт увеличен (с использованием функции масштабирования браузера), позиция будет перепутана. Всплывающее окно больше не отображается в середине myDiv.

Любая идея в чем проблема?

Edit:

Для получения дополнительной информации, если он будет создан, и я ее увеличить, это прекрасно. Но когда я перемещаю мышь на другую myDiv, и новое всплывающее окно появляется в странной позиции. Левый и верхний атрибут Div испорчены.

Answer 1

Вам не нужно JS для этого:

http://jsfiddle.net/coma/6VUpS/1/

ключ должен играть с помощью CSS и избежать вычислений JS. Контейнер div (myDiv) должен быть позиция: относительная, всплывающее окно должно быть внутри и позиция: абсолютная, сверху и слева до 50% и с использованием отрицательных полей для ее центра (http://www.css-101.org/negative-margin/06.php).

Попробуйте избегать JS для визуальной привязанности, только CSS обеспечивает правильное положение даже при масштабировании, так как оно отображается браузером.

HTML

<div class="myDiv"> 
    Hi! 
    <div class="popupWindow">you are welcome!</div> 
</div> 

CSS

div.myDiv { 
    padding: 10px; 
    background-color: #eee; 
    margin: 50px 0; 
    position: relative; 
} 

div.popupWindow { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -50px 0 0 -100px; 
    width: 200px; 
    line-height: 100px; 
    background-color: #111; 
    color: #fff; 
    text-align: center; 
    display: none; 
    pointer-events: none; 
} 

div.myDiv:hover > div.popupWindow { 
    display: block; 
} 

Премикс с помощью флажка нажать/TAP/тумблер всплывающие окна и некоторое замирание в:

http://jsfiddle.net/coma/6VUpS/3/

Подробнее Hacky:

http://jsfiddle.net/coma/6VUpS/

Более сложный пример:

http://jsfiddle.net/coma/dHTHG/

Answer 2

$(window).on('resize', function(){ 
    var $md = $('.myDiv'); 
    positionDiv($md.position().left + $md.width()/2, $md.position().top + $(this).height()/2); 
}); 

Answer 3

У меня есть простое решение CSS, если у вас есть DIV с известной высотой и шириной вы можете сделать ту же самую задачу с помощью CSS только

.popupWindow { 
    position:absolute; 
    width:313px; 
    height:383px; 
    left:50%; 
    top:50%; 
    margin-left:-156px;/*half of width*/ 
    margin-top:-191px;/*half of height*/ 
    display:none; 
} 

Answer 4

Go с позиции: относительная и попробовать это. Это решит вашу проблему, связанную с позицией.

$(".myDiv").mouseover(function() { 
positionDiv($(this).width()/2, $(this).height()/2); 
}); 

function positionDiv(xPosition ,yPosition) { 
$("#popupWindow").css("left","-" + xPosition + "px"); 
$("#popupWindow").css("top", "-" + yPosition + "px"); 
$("#popupWindow").show(); 
} 

CSS-:

.popupWindow{ 
position:relative; 
width:313px; 
height:383px; 
display:none; 
} 

http://jsfiddle.net/kishan6446/PdNkg/13/

Answer 5

Я понимаю вашу проблему и мое решение поместить любой объект, содержащий всплывающие в пос относительно, а затем установить всплывающие с теми, CSS :

.myPopUp{ 
    position:absolute; 
    display : none; 
    width:400px; 
    height : 100px; 
    margin-top : -50px; 
    margin-left:-200px; 
    background-color: red; 
    top : 50%; 
    left: 50%; 
} 

Он всегда будет центрирован.

Теперь я понимаю, что у вас есть только 1 всплывающее окно для всего вашего парящего div. Моя Хитрость заключается в том, чтобы сохранить всплывающие в варе и удалить его из родительского контейнера, чтобы добавить его в наведен DIV, как это:

var popUp = $('.myPopUp'); 

$('.myDiv').mouseover(appendPopUp); 
$('.myDiv').mouseout(function(){popUp.css('display', 'none')}); 

function appendPopUp(){ 
    console.log(popUp.parent(), $(this)) 
    if(popUp.parent()[0] != $(this)[0]){ 
     popUp.remove(); 
     $(this).append(popUp); 
    } 
    popUp.css('display', 'block') 
} 

Это должно работать, вот моя скрипка: http://jsfiddle.net/7EEZT/