Round Corners in modal_container (Implemented)

I made some changes in your script added at the corners rounded in div modal_container and created one more variable in your script to roundCorner is boolean. Is attached changes.

Best Regards,

Paulo Ferreira Nhaia

/**
 * @author Ryan Johnson 
 * @copyright 2007 LivePipe LLC
 * @package Control.Modal
 * @license MIT
 * @url http://livepipe.net/projects/control_modal/
 * @version 2.2.3
 */
if(typeof(Control) == "undefined")
    Control = {};
Control.Modal = Class.create();
Object.extend(Control.Modal,{
    loaded: false,
    loading: false,
    loadingTimeout: false,
    overlay: false,
    container: false,
    current: false,
    ie: false,
    effects: {
        containerFade: false,
        containerAppear: false,
        overlayFade: false,
        overlayAppear: false
    },
    targetRegexp: /#(.+)$/,
    imgRegexp: /\.(jpe?g|gif|png|tiff?)$/i,
    overlayStyles: {
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        zIndex: 9998
    },
    overlayIEStyles: {
        position: 'absolute',
        top: 0,
        left: 0,
        zIndex: 9998
    },
    disableHoverClose: false,
    load: function(){
        if(!Control.Modal.loaded){
            Control.Modal.loaded = true;
            Control.Modal.ie = !(typeof document.body.style.maxHeight != 'undefined');
            Control.Modal.overlay = $(document.createElement('div'));
            Control.Modal.overlay.id = 'modal_overlay';
            Object.extend(Control.Modal.overlay.style,Control.Modal['overlay' + (Control.Modal.ie ? 'IE' : '') + 'Styles']);
            Control.Modal.overlay.hide();
            Control.Modal.container = $(document.createElement('div'));
            Control.Modal.container.id = 'modal_container';
            Control.Modal.container.hide();
            Control.Modal.loading = $(document.createElement('div'));
            Control.Modal.loading.id = 'modal_loading';
            Control.Modal.loading.hide();
            var body_tag = document.getElementsByTagName('body')[0];
            body_tag.appendChild(Control.Modal.overlay);
            body_tag.appendChild(Control.Modal.container);
            body_tag.appendChild(Control.Modal.loading);
            Control.Modal.container.observe('mouseout',function(event){
                if(!Control.Modal.disableHoverClose && Control.Modal.current && Control.Modal.current.options.hover && !Position.within(Control.Modal.container,Event.pointerX(event),Event.pointerY(event)))
                    Control.Modal.close();
            });
        }
    },
    open: function(contents,options){
        options = options || {};
        if(!options.contents)
            options.contents = contents;
        var modal_instance = new Control.Modal(false,options);
        modal_instance.open();
        return modal_instance;
    },
    close: function(force){
        if(typeof(force) != 'boolean')
            force = false;
        if(Control.Modal.current)
            Control.Modal.current.close(force);
    },
    attachEvents: function(){
        Event.observe(window,'load',Control.Modal.load);
        Event.observe(window,'unload',Event.unloadCache,false);
    },
    center: function(element){
        if(!element._absolutized){
            element.setStyle({
                position: 'absolute'
            }); 
            element._absolutized = true;
        }
        var dimensions = element.getDimensions();
        Position.prepare();
        var offset_left = (Position.deltaX + Math.floor((Control.Modal.getWindowWidth() - dimensions.width) / 2));
        var offset_top = (Position.deltaY + ((Control.Modal.getWindowHeight() > dimensions.height) ? Math.floor((Control.Modal.getWindowHeight() - dimensions.height) / 2) : 0));
        element.setStyle({
            top: ((dimensions.height  0) ? offset_top : '0') + 'px' : 0),
            left: ((dimensions.width  0) ? offset_left : '0') + 'px' : 0)
        });
    },
    getWindowWidth: function(){
        return (self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0);
    },
    getWindowHeight: function(){
        return (self.innerHeight ||  document.documentElement.clientHeight || document.body.clientHeight || 0);
    },
    getDocumentWidth: function(){
        return Math.min(document.body.scrollWidth,Control.Modal.getWindowWidth());
    },
    getDocumentHeight: function(){
        return Math.max(document.body.scrollHeight,Control.Modal.getWindowHeight());
    },
    onKeyDown: function(event){
        if(event.keyCode == Event.KEY_ESC)
            Control.Modal.close();
    }
});
Object.extend(Control.Modal.prototype,{
    mode: '',
    html: false,
    href: '',
    element: false,
    src: false,
    imageLoaded: false,
    ajaxRequest: false,
    initialize: function(element,options){
        this.element = $(element);
        this.options = {
            beforeOpen: Prototype.emptyFunction,
            afterOpen: Prototype.emptyFunction,
            beforeClose: Prototype.emptyFunction,
            afterClose: Prototype.emptyFunction,
            onSuccess: Prototype.emptyFunction,
            onFailure: Prototype.emptyFunction,
            onException: Prototype.emptyFunction,
            beforeImageLoad: Prototype.emptyFunction,
            afterImageLoad: Prototype.emptyFunction,
            autoOpenIfLinked: true,
            contents: false,
            loading: false, //display loading indicator
            fade: false,
            fadeDuration: 0.75,
            image: false,
            imageCloseOnClick: true,
            hover: false,
            iframe: false,
            iframeTemplate: new Template(''),
            evalScripts: true, //for Ajax, define here instead of in requestOptions
            requestOptions: {}, //for Ajax.Request
            overlayDisplay: true,
            overlayClassName: '',
            overlayCloseOnClick: true,
            containerClassName: '',
            opacity: 0.3,
            zIndex: 9998,
            width: null,
            height: null,
            offsetLeft: 0, //for use with 'relative'
            offsetTop: 0, //for use with 'relative'
            position: 'absolute', //'absolute' or 'relative'
            roundCorner: false //rounded corners in div container
        };
        Object.extend(this.options,options || {});
        var target_match = false;
        var image_match = false;
        if(this.element){
            target_match = Control.Modal.targetRegexp.exec(this.element.href);
            image_match = Control.Modal.imgRegexp.exec(this.element.href);
        }
        if(this.options.position == 'mouse')
            this.options.hover = true;
        if(this.options.contents){
            this.mode = 'contents';
        }else if(this.options.image || image_match){
            this.mode = 'image';
            this.src = this.element.href;
        }else if(target_match){
            this.mode = 'named';
            var x = $(target_match[1]);
            this.html = x.innerHTML;
            x.remove();
            this.href = target_match[1];
        }else{
            this.mode = (this.options.iframe) ? 'iframe' : 'ajax';
            this.href = this.element.href;
        }
        if(this.element){
            if(this.options.hover){
                this.element.observe('mouseover',this.open.bind(this));
                this.element.observe('mouseout',function(event){
                    if(!Position.within(Control.Modal.container,Event.pointerX(event),Event.pointerY(event)))
                        this.close();
                }.bindAsEventListener(this));
            }else{
                this.element.onclick = function(event){
                    this.open();
                    Event.stop(event);
                    return false;
                }.bindAsEventListener(this);
            }
        }
        var targets = Control.Modal.targetRegexp.exec(window.location);
        this.position = function(event){
            if(this.options.position == 'absolute')
                Control.Modal.center(Control.Modal.container);
            else{
                var xy = (event && this.options.position == 'mouse' ? [Event.pointerX(event),Event.pointerY(event)] : Position.cumulativeOffset(this.element));
                Control.Modal.container.setStyle({
                    position: 'absolute',
                    top: xy[1] + (typeof(this.options.offsetTop) == 'function' ? this.options.offsetTop() : this.options.offsetTop) + 'px',
                    left: xy[0] + (typeof(this.options.offsetLeft) == 'function' ? this.options.offsetLeft() : this.options.offsetLeft) + 'px'
                });
            }
            if(Control.Modal.ie){
                Control.Modal.overlay.setStyle({
                    height: Control.Modal.getDocumentHeight() + 'px',
                    width: Control.Modal.getDocumentWidth() + 'px'
                });
            }
        }.bind(this);
        if(this.mode == 'named' && this.options.autoOpenIfLinked && targets && targets[1] && targets[1] == this.href)
            this.open();
    },
    showLoadingIndicator: function(){
        if(this.options.loading){
            Control.Modal.loadingTimeout = window.setTimeout(function(){
                var modal_image = $('modal_image');
                if(modal_image)
                    modal_image.hide();
                Control.Modal.loading.style.zIndex = this.options.zIndex + 1;
                Control.Modal.loading.update('');
                Control.Modal.loading.show();
                Control.Modal.center(Control.Modal.loading);
            }.bind(this),250);
        }
    },
    hideLoadingIndicator: function(){
        if(this.options.loading){
            if(Control.Modal.loadingTimeout)
                window.clearTimeout(Control.Modal.loadingTimeout);
            var modal_image = $('modal_image');
            if(modal_image)
                modal_image.show();
            Control.Modal.loading.hide();
        }
    },
    open: function(force){
        if(!force && this.notify('beforeOpen') === false)
            return;
        if(!Control.Modal.loaded)
            Control.Modal.load();
        Control.Modal.close();
        if(!this.options.hover)
            Event.observe($(document.getElementsByTagName('body')[0]),'keydown',Control.Modal.onKeyDown);
        Control.Modal.current = this;
        if(!this.options.hover)
            Control.Modal.overlay.setStyle({
                zIndex: this.options.zIndex,
                opacity: this.options.opacity
            });
        Control.Modal.container.setStyle({
            zIndex: this.options.zIndex + 1,
            width: (this.options.width ? (typeof(this.options.width) == 'function' ? this.options.width() : this.options.width) + 'px' : null),
            height: (this.options.height ? (typeof(this.options.height) == 'function' ? this.options.height() : this.options.height) + 'px' : null)
        });
        if(Control.Modal.ie && !this.options.hover){
            $A(document.getElementsByTagName('select')).each(function(select){
                select.style.visibility = 'hidden';
            });
        }
        Control.Modal.overlay.addClassName(this.options.overlayClassName);
        Control.Modal.container.addClassName(this.options.containerClassName);
        switch(this.mode){
            case 'image':
                this.imageLoaded = false;
                this.notify('beforeImageLoad');
                this.showLoadingIndicator();
                var img = document.createElement('img');
                img.onload = function(img){
                    this.hideLoadingIndicator();
                    this.update([img]);
                    if(this.options.imageCloseOnClick)
                        $(img).observe('click',Control.Modal.close);
                    this.position();
                    this.notify('afterImageLoad');
                    img.onload = null;
                }.bind(this,img);
                img.src = this.src;
                img.id = 'modal_image';
                break;
            case 'ajax':
                this.notify('beforeLoad');
                var options = {
                    method: 'post',
                    onSuccess: function(request){
                        this.hideLoadingIndicator();
                        this.update(request.responseText);
                        this.notify('onSuccess',request);
                        this.ajaxRequest = false;
                    }.bind(this),
                    onFailure: function(){
                        this.notify('onFailure');
                    }.bind(this),
                    onException: function(){
                        this.notify('onException');
                    }.bind(this)
                };
                Object.extend(options,this.options.requestOptions);
                this.showLoadingIndicator();
                this.ajaxRequest = new Ajax.Request(this.href,options);
                break;
            case 'iframe':
                this.update(this.options.iframeTemplate.evaluate({href: this.href, id: 'modal_iframe'}));
                break;
            case 'contents':
                this.update((typeof(this.options.contents) == 'function' ? this.options.contents() : this.options.contents));
                break;
            case 'named':
                this.update(this.html);
                break;
        }
        if(!this.options.hover){
            if(this.options.overlayCloseOnClick && this.options.overlayDisplay)
                Control.Modal.overlay.observe('click',Control.Modal.close);
            if(this.options.overlayDisplay){
                if(this.options.fade){
                    if(Control.Modal.effects.overlayFade)
                        Control.Modal.effects.overlayFade.cancel();
                    Control.Modal.effects.overlayAppear = new Effect.Appear(Control.Modal.overlay,{
                        queue: {
                            position: 'front',
                            scope: 'Control.Modal'
                        },
                        to: this.options.opacity,
                        duration: this.options.fadeDuration / 2
                    });
                }else
                    Control.Modal.overlay.show();
            }
        }
        if(this.options.position == 'mouse'){
            this.mouseHoverListener = this.position.bindAsEventListener(this);
            this.element.observe('mousemove',this.mouseHoverListener);
        }
        this.notify('afterOpen');
        if(this.options.roundCorner){
            var d=document.createElement("b");
            d.setStyle({ display: 'block' });
            var lim=4;
            d.style.backgroundColor='transparent';
            for(var i=1;i0;i--){
                    var x=document.createElement("b");
                    eval('x.setStyle({ backgroundColor: \'#fff\',display:\'block\',height:\'1px\',overflow: \'hidden\',margin: \'0 '+((i==lim)? '5px\'' : i+'px\'')+((i==1)? ',height: \'2px\'' : '')+'});');
                    d.appendChild(x);
            }
            Control.Modal.container.insertBefore(d,Control.Modal.container.firstChild);
        }
    },
    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
            });
        }else
            Control.Modal.container.show();
        this.position();
        Event.observe(window,'resize',this.position,false);
        Event.observe(window,'scroll',this.position,false);
    },
    close: function(force){
        if(!force && this.notify('beforeClose') === false)
            return;
        if(this.ajaxRequest)
            this.ajaxRequest.transport.abort();
        this.hideLoadingIndicator();    
        if(this.mode == 'image'){
            var modal_image = $('modal_image');
            if(this.options.imageCloseOnClick && modal_image)
                modal_image.stopObserving('click',Control.Modal.close);
        }
        if(Control.Modal.ie && !this.options.hover){
            $A(document.getElementsByTagName('select')).each(function(select){
                select.style.visibility = 'visible';
            });         
        }
        if(!this.options.hover)
            Event.stopObserving(window,'keyup',Control.Modal.onKeyDown);
        Control.Modal.current = false;
        Event.stopObserving(window,'resize',this.position,false);
        Event.stopObserving(window,'scroll',this.position,false);
        if(!this.options.hover){
            if(this.options.overlayCloseOnClick && this.options.overlayDisplay)
                Control.Modal.overlay.stopObserving('click',Control.Modal.close);
            if(this.options.overlayDisplay){
                if(this.options.fade){
                    if(Control.Modal.effects.overlayAppear)
                        Control.Modal.effects.overlayAppear.cancel();
                    Control.Modal.effects.overlayFade = new Effect.Fade(Control.Modal.overlay,{
                        queue: {
                            position: 'end',
                            scope: 'Control.Modal'
                        },
                        from: this.options.opacity,
                        to: 0,
                        duration: this.options.fadeDuration / 2
                    });
                }else
                    Control.Modal.overlay.hide();
            }
        }
        if(this.options.fade){
            if(Control.Modal.effects.containerAppear)
                Control.Modal.effects.containerAppear.cancel();
            Control.Modal.effects.containerFade = new Effect.Fade(Control.Modal.container,{
                queue: {
                    position: 'front',
                    scope: 'Control.Modal'
                },
                from: 1,
                to: 0,
                duration: this.options.fadeDuration / 2,
                afterFinish: function(){
                    Control.Modal.container.update('');
                    this.resetClassNameAndStyles();
                }.bind(this)
            });
        }else{
            Control.Modal.container.hide();
            Control.Modal.container.update('');
            this.resetClassNameAndStyles();
        }
        if(this.options.position == 'mouse')
            this.element.stopObserving('mousemove',this.mouseHoverListener);
        this.notify('afterClose');
    },
    resetClassNameAndStyles: function(){
        Control.Modal.overlay.removeClassName(this.options.overlayClassName);
        Control.Modal.container.removeClassName(this.options.containerClassName);
        Control.Modal.container.setStyle({
            height: null,
            width: null,
            top: null,
            left: null
        });
    },
    notify: function(event_name){
        try{
            if(this.options[event_name])
                return [this.options[event_name].apply(this.options[event_name],$A(arguments).slice(1))];
        }catch(e){
            if(e != $break)
                throw e;
            else
                return false;
        }
    }
});
if(typeof(Object.Event) != 'undefined')
    Object.Event.extend(Control.Modal);
Control.Modal.attachEvents();

Posted January 31st, 2008 at 8:03am by paulo_nhaia

The code add in lines 352 the script :

/* new implemented Paulo F Nhaia*/
        if(this.options.roundCorner){
            var d=document.createElement("b");
            d.setStyle({ display: 'block' });
            var lim=4;
            d.style.backgroundColor='transparent';
            for(var i=1;i0;i--){
                    var x=document.createElement("b");
                    eval('x.setStyle({ backgroundColor: \'#fff\',display:\'block\',height:\'1px\',overflow: \'hidden\',margin: \'0 '+((i==lim)? '5px\'' : i+'px\'')+((i==1)? ',height: \'2px\'' : '')+'});');
                    d.appendChild(x);
            }
            Control.Modal.container.insertBefore(d,Control.Modal.container.firstChild);
        }

Posted January 31st, 2008 at 9:51am by paulo_nhaia

The code add in lines 352 the script:

/* new implemented Paulo F Nhaia*/
        if(this.options.roundCorner){
            /*top*/
            var d=document.createElement("b");
            d.setStyle({ display: 'block' });
            var lim=4;
            d.style.backgroundColor='transparent';
            for(var i=1;i0;i--){
                    var x=document.createElement("b");
                    eval('x.setStyle({ backgroundColor: \'#fff\',display:\'block\',height:\'1px\',overflow: \'hidden\',margin: \'0 '+((i==lim)? '5px\'' : i+'px\'')+((i==1)? ',height: \'2px\'' : '')+'});');
                    d.appendChild(x);
            }
            Control.Modal.container.insertBefore(d,Control.Modal.container.firstChild);
        }

Posted January 31st, 2008 at 9:53am by paulo_nhaia