当前屏幕位置中心的绝对位置

Question

我有以下款式：

.group-action-holder.item-9{
    z-index: 8001;
    position:fixed !important;
}

我的 window 出现（当我调用 show() jquery 方法时）在当前屏幕位置的中心，当我尝试滚动页面时，我的 windows 显示在无论如何中心。

当我将 position 更改为 position:absolute 时，windows 总是出现在同一个位置（相对于顶部），并且它与其余页面一起滚动。这几乎是我想要的行为，最初（当我调用 show() jquery 方法时）windows 显示在屏幕中央。

可能吗？

Answer 1

这是一个使用 jQuery 的工作原型。

需要查询window(window.scrollY)的滚动条位置，然后设置绝对定位覆盖面板的顶部偏移量，并考虑[=的高度28=].

之后，只需要根据页面设计获得正确的 CSS 样式即可。

$("body").click(function () {
    var pgt = window.scrollY;
    var vph = $(window).height();
    var voff = pgt + vph / 2.0;
    $(".overlay").offset({top: voff}).show();
});

p {
  margin-top: 1000px;  /* for demo */
}
p.first {
  margin-top: 0;
}
.overlay {
  display: none;
  position: absolute;
  border: 1px dotted blue;
  width: 50%;
  left: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="first">First sample paragraph.... <b>click on page to show overlay</b>.</p>
<p>Second sample paragraph....</p>
<div class="overlay">Overlay window.</div>

当前屏幕位置中心的绝对位置

absolute position on the center of current screen position

css

jquery

css-position