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 ?

http://stackoverflow.com/questions/2005954/center-element-with-positionfixed here you go. — halfzebra, Jul 13 '15 at 22:57
If I understand your question correctly, you want the window (HTML element) to be centered in the screen regardless of the scroll bar position, and then when the user scrolls, the window moves with the rest of the content. — Marc Audet, Jul 13 '15 at 23:26

score 3 · Accepted Answer · answered Jul 14 '15 at 00:41

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>

Thanks, it works but it does not work as expected in IE 10 can you suggest anything to make it also work in IE? — mubashermubi, Sep 01 '15 at 18:12

absolute position on the center of current screen position

1 Answers1