Right. I believe we discussed this not a long while back, creating a modal overlay with opacity over the visible window size and disabling the body's overflow to prevent scrolling whilst displayed (to prevent IE not being able to set an opacity filter if the modal is too large).
I have been rewriting my 'largerBox' image lightbox and ended up redoing the function for creating a modal layer, trying to utilise the overflow: hidden idea so that it works on taller pages in IE. you can see it fail here - enlarge an image in IE and you get scrollbars. http://fragged.org/dev/largerBox.php, this is the method in question, at the bottom of the class toggleModal: function() { // modal view for the whole screen if (this.modal) { // already exists, remove it and revert body. this.container.setStyle("overflow", this.bodyStyle); this.modal.dispose(); delete this.modal; return false; } this.bodyStyle = this.container.getStyle("overflow"); this.container.setStyle("overflow", "hidden"); this.modal = new Element("div", { styles: { position: "absolute", top: 0, left: 0, width: screen.width, height: screen.height, background: this.options.modal.background, zIndex: this.options.modal.zIndex }, opacity: this.options.modal.opacity, events: this.options.modal.events }).inject(this.container); return this.modal; // can chain into it. } to play with it, http://mooshell.net/mxHBB/ I have used screen.width / height to set the maximum possible size of the modal overlay. BUT. in IE, the body overflow does not seem to work and the scrollable view actually grows to accomodate the size of the whole screen (ignoring browser menus, toolbars and statusbar and scrollbars that offset it). any ideas or snippets of doing this differently or better? prior to this, i had tried to use: width: window.getScrollWidth(), height: window.getScrollHeight() but on resizes, usage of things like firebug etc, it was all going to shambles... -- Dimitar Christoff <[email protected]> - http://fragged.org/
