javascript 缩放后的绝对位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16321456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Absolute position after zooming
提问by Youssef
I have divs with class="myDiv". I need to do this logic: on mouse over, I want to show a popup in the middle of the div.
我有 div class="myDiv"。我需要做这个逻辑：在鼠标悬停时，我想在 div 中间显示一个弹出窗口。
For that I have the following:
为此，我有以下几点：
$(".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();
}
The CSS:
CSS：
.popupWindow{
position:absolute;
width:313px;
height:383px;
display:none;
}
This will position the popup window in the middle of the div on mouse over. Everything works great at this point.
这将在鼠标悬停时将弹出窗口定位在 div 的中间。此时一切正常。
However, if the website is zoomed in (using the browser zoom functionality), tHe position will get messed up. The popup window no longer appears in the middle of myDiv.
但是，如果网站被放大（使用浏览器缩放功能），位置会变得混乱。弹出窗口不再出现在 中间myDiv。
Any idea what might be the problem?
知道可能是什么问题吗？
Edit:
编辑：
For more info, if it is created and I zoom it, it is fine. But when I move my mouse to another myDivand the new popup appears in a weird position. The left and top attribute of the Div are messing up.
有关更多信息，如果它已创建并且我对其进行了缩放，那就没问题了。但是当我将鼠标移到另一个时myDiv，新的弹出窗口出现在一个奇怪的位置。Div 的 left 和 top 属性搞砸了。
回答by coma
You don't need JS for this:
你不需要 JS：
http://jsfiddle.net/coma/6VUpS/1/
http://jsfiddle.net/coma/6VUpS/1/
The key is to play with CSS and avoid JS calculations. The container div (myDiv) should be position: relative, the popup must be inside and position: absolute, top and left to 50% and using negative margins to center it (http://www.css-101.org/negative-margin/06.php).
关键是玩CSS，避免JS计算。容器 div (myDiv) 应该是position: relative，弹出窗口必须在里面和position: absolute， top 和 left 到 50% 并使用负边距将其居中（http://www.css-101.org/negative-边距/06.php）。
Try avoiding JS for visual fanciness, only CSS ensures the correct position even on zoom since it's rendered by the browser.
尽量避免使用 JS 以获得视觉效果，因为它是由浏览器呈现的，因此即使在缩放时也只有 CSS 确保正确的位置。
HTML
HTML
<div class="myDiv">
Hi!
<div class="popupWindow">you are welcome!</div>
</div>
CSS
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;
}
Bonus track using a checkbox to click/tap/toggle popup and some fade in:
使用复选框单击/点击/切换弹出窗口和一些淡入的奖励轨道：
http://jsfiddle.net/coma/6VUpS/3/
http://jsfiddle.net/coma/6VUpS/3/
More hacky:
更黑客：
http://jsfiddle.net/coma/6VUpS/
http://jsfiddle.net/coma/6VUpS/
More complex example:
更复杂的例子：
回答by Karl-André Gagnon
I understand your problem and my solution is to put every object containing a pop up in pos relative and then set your pop up with those CSS :
我了解您的问题，我的解决方案是将每个包含弹出窗口的对象放在 pos 相对中，然后使用这些 CSS 设置您的弹出窗口：
.myPopUp{
position:absolute;
display : none;
width:400px;
height : 100px;
margin-top : -50px;
margin-left:-200px;
background-color: red;
top : 50%;
left: 50%;
}
It will alway be centered.
它将始终居中。
Now i understand you have only 1 pop up for all your hoverable div. My trick is to save the pop up in a var and remove it from its parent container to append it in the hovered div like this :
现在我知道您的所有可悬停 div 只有 1 个弹出窗口。我的技巧是将弹出窗口保存在 var 中，并将其从其父容器中删除，以将其附加到悬停的 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')
}
That should work, here's my fiddle : http://jsfiddle.net/7EEZT/
这应该有效，这是我的小提琴：http: //jsfiddle.net/7EEZT/
回答by Ohgodwhy
$(window).on('resize', function(){
var $md = $('.myDiv');
positionDiv($md.position().left + $md.width() / 2, $md.position().top + $(this).height() / 2);
});
回答by Manish Sharma
I have a simple css solution if you have a div with known height and width you can do same task with help of css only
我有一个简单的 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;
}
回答by Kishan Patel
Go with position:relative and try this. It will solved your problem relate to position.
与 position:relative 一起去试试这个。它将解决您与位置有关的问题。
$(".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();
}
The CSS:
CSS：
.popupWindow{
position:relative;
width:313px;
height:383px;
display:none;
}
