> se 100% on my panels and it works fine so I don't know what issues
> 
> 100% will always be 100% of the browser even when you resize it 

yes, it works perfectly in creating the modal but you need to disable
overflow on body and html (as you said).

the problem is when setting it back. I try to read the css before
opening the modal and storing it, so I can restore it back to what it
was. Alas, IE has other ideas...

if you have not defined overflow through css to auto for these, doing 
$(document.html).getStyle("overflow") returns "visible" in IE, not "auto".

in the same way, $(document.html).getStyle("overflow")  returns "scroll". hence,
if upon removal of the modal and setting it back to what it 'was', you
get scrollbars appear where there were none.

http://haslayout.net/css/Document-Scrollbars-Overflow-Inconsistency
mentions such issues with defaults.

I refactored to this, which may break when the values were INTENDED to
be visible and scroll by the design.

toggleModal: function() {
    // modal view for the whole screen
    if (this.modal) {
        this.container.setStyle("overflow", this.flowStyles.body);

        if (Browser.Engine.trident)
            $(document.html).setStyle("overflow", this.flowStyles.html);

        this.modal.dispose();
        delete this.modal;
        return false;
    }

    this.flowStyles = {
        html: $(document.html).getStyle("overflow"),
        body: this.container.getStyle("overflow")
    };

    if (Browser.Engine.trident) {
        // workaround for IE's default overflow issues
        if (this.flowStyles.body === "visible")
            this.flowStyles.body = "auto";
        if (this.flowStyles.html === "scroll")
            this.flowStyles.html = "auto";
        $(document.html).setStyle("overflow", "hidden");
    }

    this.container.setStyle("overflow", "hidden");

    this.modal = new Element("div", {
        styles: {
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            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.
}

aside from that, it seems to be fine... 

anyway, I've wasted enough time on this - as you point out, there are
bigger fish to fry if the class is to ever be finished :)

Regards,
-- 
Dimitar Christoff <[email protected]> - http://fragged.org/

Reply via email to