1

使用 Javascript 制作一个绝对定位的悬停元素以使高度随内容变化的一种便捷方法是将宽度、顶部和左侧指定为样式字段。例如：

popup.style.width  = foo.offsetWidth - 10 + 'px';
popup.style.top    = document.getElementById(bar)
    .getBoundingClientRect().top + 'px'; // for IE7, can't use offsetTop
popup.style.left   = '15px';

如何调整此代码以根据其中心而不是顶部来绝对定位弹出窗口？我想做popup.style.center而不是popup.style.top，但这不是 CSS 的工作方式。一个完全天真的解决方案是将它添加到 DOM，然后测量它的高度，然后从顶部减去一半的高度。

或者，是否有一种完全不同的方法仍然允许为元素的每个角设置任意位置？

我正在寻找一个纯 Javascript 解决方案（例如没有 jquery）。

重要提示：我不想将弹出窗口居中在另一个元素中。相反，我希望将弹出窗口的中心点指定为距屏幕顶部的像素偏移量。此像素偏移量可能基于另一个元素，也可能是原始数字。

4

5 回答 5

1

在您的重要说明中，您正在处理两个不同的概念：

  • 第一个，从屏幕顶部偏移，可以用position:fixed.
  • 第二个，基于另一个元素的偏移，是绝对定位有用的地方，并且将相对于第一个position:relative父元素。

正如建议的表格单元居中（感谢 Itay 评论），在您的情况下使用表格显示是有意义的，因为这正是它的目的：使容器适应其内容。

你需要一些额外的html：

<div class="container">
  <div class="popup">
    <div class="content">
      <!-- CONTENT -->
    </div>
  </div>
</div>

并应用这个 css：

.container {
  position: absolute; /* or fixed */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.popup {
  display: table;
  height: 100%;
}
.content {
  display: table-cell;
  vertical-align: middle;
}

感谢您可以使用的表格单元格显示vertical-align: middle，不再需要 javascript。

对于水平居中，您仍然可以width: 50%; margin: 0 auto;在弹出类上添加经典。

于 2013-08-25T19:44:04.787 回答
1

我一直在考虑这个问题。您实际上可以通过在容器内添加一个 div 来从容器的中心而不是角落绝对定位元素。这个内部容器或参考容器是父容器的 50% 高度和 50% 宽度。然后你可以相对于右下角定位。

HTML

<div class="container">
  <div class="container-inner">
    <div class="pointer pointer-1" data-name="pointer-1"></div>
    <div class="pointer pointer-2" data-name="pointer-2"></div>
  </div>
</div>

CSS

这是我们要放置指针的容器

html, body {
  height: 100%;
}

.container {
  height: 80%;
  width: 80%;
  margin: 0 auto;
  border: 1px solid blue;
}

我们使用这个容器来获得一个可以用作参考的中心点。我们使用这个 div 的右下角作为我们的参考点。

.container-inner {
  border: 1px dashed red;
  height: 50%;
  width: 50%;
  position: relative;
}

创建几个直径为 60 像素的目标

.pointer {
  height: 40px;
  width: 40px;
  background-color: orange;
  border: 10px solid red;
  border-radius: 60px;
  position: absolute;
}

中心目标之一在容器的中心

.pointer-1 {
  bottom: calc(-0% - 30px);
  right: calc(-0% - 30px);
}

将目标 2 从容器中心向右和向下定位 25%。

.pointer-2 {
  bottom: calc(-50% - 30px);
  right: calc(-50% - 30px);
}

您可以看到这个JSBin的工作演示。

于 2014-09-23T14:04:13.607 回答
1

在 jquery 中执行此操作非常简单

演示jsFiddle

jQuery.fn.center = function(parent) {
    if (parent) {
        parent = this.parent();
    } else {
        parent = window;
    }
    this.css({
        "position": "absolute",
        "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
        "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    });
return this;
}
$("div.target").center(true);
于 2013-08-25T19:26:41.387 回答
0

最后，我决定只将元素添加到 DOM，测量它的高度，然后从顶部减去一半的高度。我在添加之前使元素不可见，并在调整高度后再次可见，以避免闪烁。

于 2013-08-25T22:16:47.337 回答
0

这行得通吗？

.popup {
  margin-top: -50%;
}
于 2013-08-25T18:44:26.783 回答