center overlay even if scrolled down
I have an overlay that is activated by a link which is half way down the screen. How can I get this to be centered in the middle of the screen. I also want to stop any scrolling of the body. I cant seem to figure it out.
At present I am using position absolute and top 25% and left 25% but it doenst work.
Renegade posted this at 21:50 — 28th November 2010.
He has: 3,022 posts
Joined: Oct 2002
Not entirely sure if it is a good idea to do what you are wanting as your users may get confused or even frustrated as to why they can't scroll. Also, I'm not sure if you mean an overlay like you see in the lightbox galleries or if you mean a div over your entire page.
If you mean the latter, you can achive the same effect with some jQuery:
<script>$(document).mousemove(function (e) {
$("#page-container").css("width",$(window).width());
$("#page-container").css("height",$(window).height());
});
</script>
Just set #page-container to whatever your div name is. What this will do is constantly poll the window's width and height as the user moves around your site. Not ideal solution but it does work.
Do you have an example of the effect you are trying to achive?
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.