Modal popup background - resize to 100% on window resize
Hello folks
I'm the new guy and I brought a problem with me:
I have these pretty standard modal/layer popups with a black background that covers the whole site behind the popup. The CSS of the background is something like this:
position: absolute;
height: 100%;
width: 100%;
left: 0;That works fine, but when you resize the browser to the point where it has scrollbars, the black background only covers the visible part of the site, if you scroll, the overflow of the body will not be covered by the black background.
Maybe theres a smart CSS trick to get that div to stretch itself into the overflow part of the site? I'm more of a javascript guy and wrote a little function to stretch the background div onresize. But I'm having problems with that too - for firefox it's just a matter of setting the width/height of the div to document.body.scrollHeight/scrollWidth, but for IE I can't seem to find the right properties or rules to apply said properties to get the background div to be 100% in every case.
Does that make any sense?
Any help here?
webwiz posted this at 01:08 — 5th August 2010.
He has: 629 posts
Joined: May 2007
The usual way of covering the viewport (the visible part of a page) is to use fixed positioning. Thus your "modal popup" or "layer" would have this CSS:
position: fixed;top: 0;
left: 0;
bottom: 0;
right: 0;
Note that you don't specify any width or height.
Sadly, Internet Explorer prior to version 7 does not support "position: fixed." I believe there are JavaScript work-arounds.. but I'm more of a CSS guy.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
chlab posted this at 08:36 — 5th August 2010.
They have: 3 posts
Joined: Aug 2010
Thanks webwiz, that actually works perfectly in FF. In IE 8 though, the background fills the screen, but the page is below it - so it's not absolute anymore. The z-index is the higher than any other element on the page, but it won't "float" over the page like it's supposed to. Is your solution working for you in IE >= 6?
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.