absolute position on the center of current screen position

Question

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 ?

Answer 1

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>