Question

我有class="myDiv"的div。我需要做这个逻辑：鼠标悬停时，我想在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的中间。

知道可能是什么问题吗？

编辑：

有关详细信息，如果已创建并缩放，则可以。但当我将鼠标移动到另一个myDiv并且新弹出窗口出现在一个奇怪的位置时。 Div的左侧和顶部属性搞乱了。

Answer 1

你不需要JS：

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

关键是要使用CSS并避免JS计算。容器div（myDiv）应为 position：relative ，弹出窗口必须位于内部且位置：绝对，顶部和左侧为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;
}

奖金跟踪使用复选框点击/点击/切换弹出窗口和一些淡入：

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

更多hacky：

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

更复杂的例子：

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

Answer 2

我理解你的问题，我的解决方案是将每个包含弹出窗口的对象放在pos中，然后用那些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。我的诀窍是将弹出窗口保存在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')
}

这应该有用，这是我的小提琴：http://jsfiddle.net/7EEZT/

Answer 3

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

Answer 4

我有一个简单的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 5

跟位置：亲戚一起试试吧。它将解决您与位置相关的问题。

$(".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/

缩放后的绝对位置

5 个答案: