Modal

modal.js

/*
* HTML:
* <div id="modal-overlay"></div>
* <div id="modal"><a id="modal-close">x</a><div id="modal-content"></div></div>
*
* CSS:
* #modal-overlay { 
*     display: none;
*     position: fixed;
*     top: 0;
*     left: 0;
*     width: 100%;
*     height: 100%;
*     background: #fff;
*     opacity: 0.4;
*     z-index: 9999998;
* }
*
* #modal { 
*     display: none; 
*     position: absolute; 
*     top: 15%; left: 50%;
*     z-index: 9999999;
*     padding: 15px;
*     background: #fff;
*     border: 10px solid rgba(0,0,0,.6);
*     border-radius: 10px;
* }
*    
* #modal-close { 
*     display: block;
*     float: right;
*     margin: -35px -35px 0 35px;
*     padding: 0;
*     width: 30px; 
*     height: 28px;
*     font: Arial, Helvetica, sans-serif;
*     font-size: 19px;
*     font-weight: bold;
*     background: #fff;
*     color: #666;
*     text-align: center;
*     border-radius: 15px; 
*     border: 4px solid rgba(0,0,0,.6); 
* }
*  
* #modal-close:hover { color: #000; text-decoration: none; }
*
*/

var modal = {
    
    overlay : $('#modal-overlay'),
    region : $('#modal'),
    closer : $('#modal-close'),
    content : $('#modal-content'),
    
    open : function (w,u){
        _this = this;
        _this.content.load(u,function(){
            _this.overlay.fadeIn(300);
            _this.region.css({ 'top':(window.pageYOffset+100)+'px','width':w+'px','margin-left':'-'+Math.round(w/2)+'px' }).fadeIn(300);
            // Closers
            _this.closer.click(function(){ _this.close(); }); // Close button
            $(document).keyup(function(e) { if (e.keyCode == 27) { _this.close(); } }); // Escape Key
        });
    },
    
    close : function(){
        _this.region.fadeOut(300);
        _this.overlay.fadeOut(300);
    }
    
};

Can you give a working example?