modal_window.js

var modal = {
    modalWindow  : $('#modalWindow'),
    windowMask   : $('#mask'),
    config: {
        // maskEffect  : 'fadeToggle',
        // maskSpeed   : 'fast',
        // modalEffect : 'fadeToggle',
        // modalSpeed  : 'fast'
    },
    init: function(config) {
        var that = this;
        $.extend(this.config, config);
        if (!this.modalWindow.length) {
            $('<div></div>', {
                id      : 'modalWindow'
            }).insertAfter('.contentHolder');
            $('<div></div>', {
                id      : 'mask',
                style   : 'display:none;'
            }).appendTo('#modalWindow');
            this.windowMask = $('#mask');
            this.windowMask.on('click', function() {
                that.removeBGMask();
            });
        }
    },
    addToModalWindow: function(id) {
        $(id).appendTo('#modalWindow');
    },
    applyBGMask: function() {
        this.windowMask.css({'width':$(window).width(),'height':$(document).height()});
        this.windowMask.fadeTo(100,0.8);
    },
    close: function(id) {
        $(id).fadeOut('fast');//[this.config.modalEffect](this.config.modalSpeed);
        this.removeBGMask();
    },
    removeBGMask: function() {
        this.windowMask.siblings().fadeOut('fast');//[this.config.modalEffect](this.config.modalSpeed);
        this.windowMask.fadeOut('slow');//[this.config.maskEffect](this.config.maskSpeed);
    },
    show: function(id, callback) {
        this.applyBGMask();
        $id = $(id);
        $window = $(window);
        $id.css('top', ($window.height()/2-$id.height()/2)+$window.scrollTop());
        $id.css('left', $window.width()/2-$id.width()/2);
        $id.fadeIn('slow');//[this.config.modalEffect](this.config.modalSpeed);
        if (typeof callback == 'function') callback();
    }
};