[Bug] Modal "jumping" when shown

Hi all.

I'm using an Ajax modal box and finding that the overlay "flickers" when it's shown.

This is due to the div first being "shown" on the page and then being repositioned: it's only a couple of milliseconds delay in being shown to being positioned, but on some machines it's really noticeable (and annoying).

To fix the problem, we can call the position() function before the show() function.

  update: function(html){
        if(typeof(html) == 'string')
            Control.Modal.container.update(html);
        else{
            Control.Modal.container.update('');
            (html.each) ? html.each(function(node){
                Control.Modal.container.appendChild(node);
            }) : Control.Modal.container.appendChild(node);
        }
        if(this.options.fade){
            if(Control.Modal.effects.containerFade)
                Control.Modal.effects.containerFade.cancel();
            Control.Modal.effects.containerAppear = new Effect.Appear(Control.Modal.container,{
                queue: {
                    position: 'end',
                    scope: 'Control.Modal'
                },
                to: 1,
                duration: this.options.fadeDuration / 2
            });
            this.position();
        }else{
            this.position();
            Control.Modal.container.show();
        }

I'm not sure if this will cause a problem for cross-browser stuff or not (haven't had a chance to test it) but it does seem to fix the flicker-problem in Firefox.

Posted September 20th, 2007 at 4:41am by rjharrison