views:

9980

answers:

5

I need to lock the browser scrollbars when I show a div that represent a modal window in Internet Explorer 7 only. Googling I found that I can use document.body.style.overflow='hidden' but this doesn't work for IE7. I also tried with document.body.scroll="no" which works but only after I mouse over the scrollbar :-S

Does anybody knows a better aproach?

Thansks

+2  A: 

Set your modal overlay div to fill the body, so even if they scroll there's nothing they can do because everything is hidden underneath it.

Joel Coehoorn
how do you get the size of the viewport in IE7? I can't get the real size of the body with any of these:window.innerHeight, document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.body.clientHeightThe page has a size of around 2000 pixels
Flupkear
can't you just use 100%
Joe Philllips
If you use jquery you can just do $("body").width() and $("body").height() to get the body width and height in a cross browser compatible way.
Kevin Tighe
The application I'm working on uses Prototype, I couldn't find a way with Prototype to get the real height. Height 100% doesn't work either.I fixed it with position:fixed
Flupkear
+7  A: 

To answer your various questions (including that in your other comment), I think you're using the wrong positioning method.

Try position:fixed. It's basically the same as position:absolute apart from it's relative to the absolute viewport. Ie: if the user scrolls, the item stays in the same place on the screen.

So with this in mind, you can lay out a position:fixed overlay. Within that you can have your position:absolute (or fixed again, if you prefer -- it shouldn't make a difference) modal box.

Oli
Thanks a lot, that just solved the problem. I thought I know almost all about CSS until now :-PThanks again.
Flupkear
Thanks I never would have figured this out! You saved my ass.
simianarmy
A: 

you can also hide scrollbars by using overflow:hidden so the user wont see the scollbars so it wont get tempted to scoll around:)

Quamis
A: 

you can also hide scrollbars by using overflow:hidden so the user wont see the scollbars so it wont get tempted to scoll around:)

will this also disable scrolling via the mouse wheel?

guest
A: 

this can hepl you:

documentOBJ = { /Width and Height of the avaible viewport, what you'r seeing/ window : { x : function(){return (document.documentElement && document.documentElement.clientWidth) || window.innerWidth || self.innerWidth || document.body.clientWidth; }, y : function(){return (document.documentElement && document.documentElement.clientHeight) || window.innerHeight || self.innerHeight || document.body.clientHeight;} },

/*Scroll offset*/ 
scroll : {
    x : function(){return ( document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft; },
    y : function(){return ( document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop; }
},

/*Height and width of the total of the xhtml in a page*/
page : {
    x : function(){return (document.documentElement && document.documentElement.scrollWidth) ? document.documentElement.scrollWidth : (document.body.scrollWidth > document.body.offsetWidth) ? document.body.scrollWidth : document.body.offsetWidth; },
    y : function(){return (document.documentElement && document.documentElement.scrollHeight) ? document.documentElement.scrollHeight : (document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight; }
},
pointer : {}

}

nahum silva