jquery - absolute position on the center of current screen position -
i have following styles:
.group-action-holder.item-9{ z-index: 8001; position:fixed !important; }
my window appears(when invoke show()
jquery method) on center of current screen position , when try scroll page windows shows on center anyway.
when change position
position:absolute
windows appears on same place(relative top) , scrolls rest page. desired behaviour want initially(when invoke show()
jquery method) windows shows on center of screen.
is posiible ?
here working prototype using jquery.
you need query scroll bar position of window (window.scrolly
) , set top offset of absolute positioned overlay panel, , take account height of window.
after that, matter of getting css styling right based on design of 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; /* 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 show overlay</b>.</p> <p>second sample paragraph....</p> <div class="overlay">overlay window.</div>
Comments
Post a Comment