absolute position on the center of current screen position

I have the following styles:

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

my window appears(when I invoke show() jquery method) on the center of current screen position and when I try to scroll page my windows shows on the center anyway.

When I change position with position:absolute windows appears always on the same place(relative to the top) and it scrolls together with rest page. It is almost desired behaviour only I want that initially(when I invoke show() jquery method) windows shows on the center of screen.

Is it posiible ?

---

Here is a working prototype using jQuery.

You need to query the scroll bar position of the window ( window.scrollY ) and then set the top offset of the absolute positioned overlay panel, and take into account the height of the window.

After that, it is just a matter of getting the CSS styling right based on the design of the page.

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

链接地址: http://www.djcxy.com/p/75808.html

上一篇: 为什么这个div不在屏幕上？

下一篇: 当前屏幕位置中心的绝对位置