Absolute position at the center of the current screen position
I have the following styles:
.group-action-holder.item-9{
z-index: 8001;
position:fixed !important;
}
my window appears (when I call the show()
jquery method ) in the center of the current screen position, and when I try to scroll the page, the windows are still displayed in the center.
When I change position
to position:absolute
, the windows are always displayed in the same location (relative to the top) and it scrolls along with the rest page. This is almost the desired behavior, only I want to initially (when I call the show()
jquery method ) the windows appear in the center of the screen.
Is it possible?
source to share
Here's a working prototype using jQuery.
You need to query the position of the window's scrollbar ( window.scrollY
) and then set the top offset of the absolute positioned overlap bar and respect the window's height.
After that, it's just a matter of getting the right CSS styling based on the page design.
$("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>
source to share