majx > popin

You'll soon be able to download, checkout and browse the source on Google Code

JS

/*------------------------------------------------------------------------------
    JS Document (https://developer.mozilla.org/en/JavaScript)

project:    majx JavaScript Library http://code.google.com/p/majx-js/
    license:    New BSD License http://www.opensource.org/licenses/bsd-license.php
    author:     Copyright (c) 2009
                Yves Van Goethem and Vincent Valentin
                All rights reserved.

module:     customizable popins (modal boxes)
    summary:    CONFIG
                DOM.READY
                POPIN
----------------------------------------------------------------------------- */

/* =CONFIG
------------------------------------------------------------------------------*/
majx.set({
    popin1 : {
        target : '.popin',              // target links with this class (CSS 3 Selectors)
        name : {
            popin   : 'popin',          // the popin id
            cache   : 'cache',          // the popin cache id
            close   : 'close',          // the close button id
            content : 'pop-content'     // the id where to extract the code in the target page.
        },
        behaviours : {
            closeClick : true,          // if true permits to click outside the popin to close it
            close  : 'Close',           // close button, you can also include HTML code
            anim   : true,              // true by default, false avoids fadeIn
            resize : false              // experimental to refit the popin when the window is resized
        },
        style : {
            marginMax : 50,             // minimum margin between the popin and the window
            opacity   : 0.50,           // cache final opacity
            maxWidth  : 250,            // minimal screen width to open popins
            maxHeight : 250             // minimal screen height to open popins
        }/*,
        callback : {                    // events
            onload   : externFnLoad,
            onunload : externFnUnload,
            onbeforeload  : externFnBeforeLoad,
            onreload : externFnReload
        }*/
    }
});

/* =DOM.READY
------------------------------------------------------------------------------*/
jQuery(document).ready(function() {
    popin1 = new popin(majx.config.popin1);
});

/* =POPIN
------------------------------------------------------------------------------*/
var popinMemorize = {
    activeLink : null
};
function popin(config) {
    var targetLink = config.target;
    var id_popin   = config.name.popin;
    var id_cache   = config.name.cache;
    var id_close   = config.name.close;
    var id_content = config.name.content;
    var marginMax  = config.style.marginMax || 50;          // popin margin
    var marginIE6  = config.style.marginIE6 || 50;          // IE 6 fix
    var opacity    = config.style.opacity;
    var maxWidth   = config.style.maxWidth;
    var maxHeight  = config.style.maxHeight;
    var pop_hash   = config.behaviours.hash || 'pop';
    var closeStr   = config.behaviours.close;
    var innerLoad  = config.behaviours.innerLoad || true;
    var anim       = config.behaviours.anim   || true;
    var resize     = config.behaviours.resize || false;     // EXPERIMENTAL / 
    var anchor     = config.behaviours.anchor || false;     // EXPERIMENTAL / handling location hash
    var closeClick = config.behaviours.closeClick || false;
    // var loadImage  = new Image();
    // if (config.behaviours.loadingImage) {
    //     loadImage.src = config.behaviours.loadingImage.src || null;
    //     loadImage.alt = config.behaviours.loadingImage.alt || null;
    //     loadImage.id  = config.name.loadimg || null;
    // }
    if (config.callback) {
        var callOnunload = config.callback.onunload || null;
        var callOnload   = config.callback.onload   || null;
        var callReload   = config.callback.onreload || null;
        var callOnBeforeLoad = config.callback.onbeforeload  || null;
    }
    
    var popin      = null;
    var popinCache = null;
    var body = jQuery('body');
    
    var url, parametres, paramets, params, iparam = null; // ugly!!!
    
    var globs = {
        callerElm : null,
        popinLoaded : 0
    };
    
    var utils = {
        getWindowDimensions : function(dimension) {
            var dimension = dimension.substr(0, 1).toUpperCase() + dimension.substr(1);
            var result = 0;
            if (typeof(w['inner'+dimension]) == "number") {
                // Standard Browsers
                var result = w['inner'+dimension];
            }
            else if (d.documentElement && d.documentElement['client'+dimension]) {
                // IE 6+ in standard mode
                var result = d.documentElement['client'+dimension];
            }
            return result;
        },
        fixDimensions : function(dimension, direction) {
            if (utils.getWindowDimensions(dimension) <  popin[dimension]()) {
                popin.css(dimension,(utils.getWindowDimensions(dimension) - marginMax) + "px");
                popin.css("margin-"+direction,"-" + Math.round((utils.getWindowDimensions(dimension) - marginMax)/2) + "px");
            }
        },
        getScrollPositions : function(axis) {
            var axis = axis.toUpperCase();
            var axis2 = (axis == 'Y') ? 'Top' : 'Left';
            var result = 0;
            if (typeof w['page'+axis+'Offset'] == "number") {
                result = w['page'+axis+'Offset'];
            }
            else if (d.body && d.body['scroll'+axis2]) {
                result = d.body['scroll'+axis2];
            }
            else if (d.documentElement && d.documentElement['scroll'+axis2]) {
                result = d.documentElement['scroll'+axis2];
            }
            return result;
        },
        setLinks : function(elm, inner) {
            // update this to a resolution check, rather than to a window size check ?
            if (!((utils.getWindowDimensions('width') < maxWidth)
            || (utils.getWindowDimensions('height') < maxHeight))) {
                if (!popin && typeof callOnBeforeLoad == 'function') {
                    callOnBeforeLoad();
                }
                var options = {
                    inner : inner
                };
                openPopin(jQuery(elm), options);
            }
        }
    };
    
    function openPopin(elm, options) {
        var focusElm = null;  // a DOM element where the focus is applied on close
        var inner    = false; // if true permits inner reloads
        if (options) {
            if (options.focusElm) {
                focusElm = options.focusElm;
            }
            if (options.inner) {
                inner = true;
            }
        }

url = null;

}();
        
        var handleStatus = function() {
            if (typeof inner != 'undefined' && inner == true) {
                return;
            }
            if (textStatus != 'success') {
                popin.append('<div id="' + id_content + '">'+
                                '<p>Message : '+ textStatus + '</p>' +
                                '<p>ReadyState : '+ XHR.readyState + '</p>' +
                                '<p>Status : '+ XHR.status + '</p>' +
                             '</div>'+closeHTML);
                jQuery('#' + id_close +' a').bind('click',function(){
                    closePopin();
                    return false;
                });
            }
            popin.show();
            popin.attr("tabindex","-1");
            popin.focus();
                        
            globs.popinLoaded = 1;
        }();
        
        
    } // end setPopin
        
    function closePopin(onload, options) {
        // we need this if we use the external interface
        popinCache = popinCache || jQuery('#' + id_cache);
        popin = popin || jQuery('#' + id_popin);
        var tmpPopin = document.getElementById(id_popin);
        
        globs.popinLoaded = 0;
        
        var handleEvents = function() {
            if (!onload && typeof tmpPopin.setUnload == 'function') {
                tmpPopin.setUnload();
                tmpPopin.setUnload = null;
                delete tmpPopin;
            }
            if (anchor) {
                var position_x = utils.getScrollPositions('x');
                var position_y = utils.getScrollPositions('y');
                w.location.hash = '#';
                w.scrollTo(position_x,position_y);
            }
        }();

CSS

/*------------------------------------------------------------------------------
    CSS Document (http://www.w3.org/Style/CSS/)

module:     customizable popins (modal boxes)
    summary:    POPIN
----------------------------------------------------------------------------- */

/* =POPIN
------------------------------------------------------------------------------*/
#cache {
    position:fixed;
    _position:absolute; /* let's give IE6 absolute, rewrite it as you like if you want to avoid this hack ;) */
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#000;
    color:inherit;
    display:none;
}

#popin {
    position:fixed;
    _position:absolute; /* let's give IE6 absolute, rewrite it as you like if you want to avoid this hack ;)  */
    
    /* default dimensions and positions */
    top:50%;
    left:50%;
    margin-left:-400px;
    margin-top:-225px;
    width:800px;
    height:450px;
    
    /* styles */
    background-color:#FFF;
    color:inherit;
    overflow:auto;
    display:none;
}

#popin:focus {
    outline:0;
}

#close {
    position:absolute;
    top:0;
    right:0;
    margin:5px;
    padding:5px;
    background-color:#FFF;
    color:inherit;
    border:1px solid #000;
}

#close li {
    list-style-type:none;
}

#popin #pop-content {
    margin:0 10px;
}

majx modules > popin

JS

CSS