Question

我有以下样式：

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

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

当我用position更改position:absolute时，窗口始终显示在同一位置（相对于顶部），并且它与其余页面一起滚动。我最初想要的行为（当我调用show() jquery方法时）窗口显示在屏幕中心。

是否可以？

Answer 1

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

您需要查询窗口的滚动条位置（window.scrollY），然后设置绝对定位的叠加面板的顶部偏移量，并考虑窗口的高度。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: