a simple Overlay class

Overlay.css

/* --- Modal Overlay Styles --- */
#mask {position:absolute;left:0;top:0;z-index:9000;background-color:#000;display:none;}
.window {position:absolute;left:0;top:0;width:350px;height:250px;display:none;z-index:9000;padding:20px;background: #fff;padding: 0px; #border: 3px #999 solid;-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.4);border-radius: 2px;}
.window .close {position: absolute; top: -19px; right: 0px; /*height: 14px;*/ width: 50px; /*text-indent: -1500em;*/ overflow: hidden;color:#fff; text-transform: lowercase;cursor: pointer;background: #c00; font-size: 10px; padding: 3px 5px;text-align: center;}
.window .tl,.window .tm,.window .tr,.window .l,.window .r,.window .bl,.window .bm,.window .bs,.window .br {background-image: url(/images/toshibadirect/ui/chrome/drop-shadow.png);display: block;position: absolute;}
.window .tl,.window .tm,.window .tr,.window .l,.window .r,.window .bl,.window .bm,.window .bs,.window .br {#display:none;}
.window .tl {height: 12px; width: 15px; top:-12px; left:-15px; background-position: top left;}
.window .tm {height: 12px; width: 340px; top:-12px; left:0px; background-position: -15px 0px;}
.window .tr {height: 12px; width: 25px; top: -12px; right: -15px; background-position: top right;}
.window .l {width: 15px;height: 250px; top:0px; left: -15px; background-position: 0px -12px;}
.window .r {width: 15px;height: 250px; top:0px; right: -15px; background-position: right -12px;}
.window .bl {width: 15px;height: 25px; bottom:-20px; left: -15px; background-position: bottom left;}
.window .bm {height: 20px; bottom: -20px; background-position: -15px bottom;}
.window .bs {height: 20px;width: 20px; bottom: -20px;right:0px; background-position: -896px bottom;}
.window .br {height: 25px;width: 15px; bottom: -20px;right: -15px; background-position: bottom right;}
/* --- End Modal Overlay Styles --- */

Overlay.js

(function($) {
    var Overlay = window.Overlay = function(){
      var options;
      if(arguments.length == 2){
        this.element = $(arguments[0]);
        options = arguments[1];
      } else {
        options = arguments[0];
      }
      
      //merge options with defaults
      this.options = $.extend( true ,{
        'width': 350,
        'height':250,
        'call':'something',
        'modal':true,
        'windowId': 'window',
        'rel':'loading',
        "closeButton":true,
        'dropshadow':true,
        'mask':{
          active:true,
          opacity:'0.5',
          clickClose: true,
          target: 'body',
          id: 'mask',
          shim: true
        }
      }, options || {});
      
      this.initialize();
    };
    
    Overlay.prototype = {
      initialize: function(){
        var self = this;
        self.doc = $(document);
        self.initWindow();

        if(self.options.closeButton){
          self.initCloseButton();
        }
        $(window).resize(function(){
          self.centerWindow();
        });
      },
      
      launch: function(){
        var self = this;
        self.openWindow();
      },
      
      openWindow: function(){
        var self = this;
        self.centerWindow();
        self.doc.trigger('window.before.open');
        self.win.fadeIn('fast', function(){
          self.doc.trigger('window.open');
        });
        
      },
      
      closeWindow: function(){
        var self = this;
        self.win.fadeOut('fast');
      },
      
      initWindow: function(){
        var self = this,
            windowId = self.getWindowId()+'-window',
            win = document.getElementById(windowId);
            
        self.win = win?$(win):$('<div id="'+windowId+'" class="window" />').appendTo($('body')[0]);
        
        self.win.css({
          'width'    : self.options.width,
          'height': self.options.height
        });
        
        if(self.options.dropshadow && self.win.children('.tl').length <= 0){
            self.win.append('<span class="tl"></span><span class="tm"></span><span class="tr"></span>');
            self.win.append('<span class="bl"></span><span class="bm"></span><span class="bs"></span><span class="br"></span>');
            self.win.append('<span class="l"></span><span class="r"></span>');
            //adjust shadow sizes.
            $('#'+windowId+' span.tm').css('width', self.options.width - 10);
            $('#'+windowId+' span.l,#'+windowId+' span.r').css('height',self.options.height - 5);
            $('#'+windowId+' span.bm').css('width',self.options.width - 20);
        }
        
                
      },
      
      initCloseButton: function(){
        var self = this;
        self.closeButton = $('<span>',{
          "class": 'close',
          "text": 'close'
        });
        self.win.append(self.closeButton);

        self.closeButton.click(function(){
          self.closeWindow()  
        });
      },
      
      centerWindow: function(){
        var self = this;
        var docHeight = $(document).height();
        var winHeight = $(window).height();
        var winWidth = $(window).width();
        
        self.win.css({
            'top'    : winHeight/2 - self.options.height*.5 + $(window).scrollTop(),
            'left'    : winWidth/2 - self.options.width*.5
        });
      },
      
      getWindowId: function(){
        if(this.element){
          return this.element.attr('id') || this.element.attr('rel');
        }
        
        return this.options.windowId;
      },
      
      setContent: function(content){
        var self = this,
            contentId = self.getWindowId()+'-content',
            contentLayer = self.win.find('#'+contentId);

        if(!contentLayer.length > 0){
          contentLayer = $('<div id="'+contentId+'" class="window-content" />');
          self.win.append(contentLayer);
        }
        
        contentLayer.html(content);
        return true;
      }

    };
    
    $.fn.overlay = function(options){
      
      this.click(function(event){
        event.preventDefault();
        var o = new Overlay(this, options);
        $(this).data('overlay',o);
        o.launch();
      });
      
      return this;
    };

})(jQuery);

Overlay.Mask.js

if(!window.Overlay){
  throw new Error('the Class "Overlay" doesn\'t appear to be present');
}

/*
 *  Overlay Mask
 */
(function($){

    var Mask = {
        _mask: false,
        
        initMask: function(){
            var self = this;
            self.target = $(self.options.mask.target);
            self.doc = $(document);
            self.target.append(self.getMask().hide());
            self._attachEvents();
            if(self.options.mask.shim){
              self._initShim();
            }

        },
        
        _attachEvents:function(){
            var self = this;
            self.getMask().bind({
                click: function(){
                    self.doc.trigger('mask.click');
                }
            });
            
            self.doc.bind({
              'mask.resize': function(){
                self.resizeMask();
              }
            });
            
            $(window).resize(function(){
              self.doc.trigger('mask.resize');
            });
            
        },
        
        resizeMask: function(){
          var self = this;
          self.getMask().css({
            'width':$(window).width(),
            'height':self.doc.height()
          });
          return self;
        },
        
        showMask: function(){
            var self = this;
            $('body').css('overflow','hidden');
            self.doc.trigger('mask.before.open');
            self.resizeMask();
            self.getMask().css({
              'z-index':3000,
              'opacity':0,
              'display': 'block'
            }).animate({
              'opacity': self.options.mask.opacity
            }, 100);

            self.doc.trigger('mask.open');
            self.doc.trigger('mask.after.open');
        },
        
        hideMask: function(){
            var self = this;
            $('body').css('overflow','auto');
            self.doc.trigger('mask.before.close');
            self.getMask().fadeOut('fast');
            self.doc.trigger('mask.close');
            self.doc.trigger('mask.after.close');
        },
        
        getMask: function(){
          var self = this;
          if(this._mask){
            return this._mask;
          }
          
          var m = document.getElementById(self.options.mask.id),
              mask = m ? $(m) : this._createMask();
          
          self.setMask(mask);
          
          return self._mask;
        },
        
        setMask: function(element){
          var self = this;
          if(element){
            self._mask = element;
          }
          
          return self;
        },
        
        _createMask: function(){
          var self = this;
          var mask = $('<div id="'+self.options.mask.id+'"></div>');          
          return mask;
        },
        
        inject: function(){
            var self = this;
            self.target.append(self.mask);
        },
        
        _initShim: function(){
          var self = this;
          self._shim = $('<iframe />', {
            "scrolling": "no",
            "background":"transparent",
            "frameBorder": "0",
            "src":"javascript:'<html></html>\';"
          }).css({
            "top":0,
            "left":0,
            "position":"absolute",
            "z-index": 2999
          }).hide().appendTo(self.target);
          
          self.doc.bind({
            'mask.before.open':function(){
              self._shim.css({
                'width':$(window).width(),
                'height':self.doc.height(),
              }).show();
            },
            'mask.after.close':function(){
              self._shim.hide();
            }
          })
          
        }
    };
    var initialize = Overlay.prototype.initialize;
    Mask.initialize = function(){
      var self = this;
      initialize.call(this);
      self.initMask();
    };
    
    var launch = Overlay.prototype.launch;
    Mask.launch = function(){
      var self = this;
      self.showMask();
      launch.call(this);
    };
    
    var closeWindow = Overlay.prototype.closeWindow;
    Mask.closeWindow = function(){
      var self = this;
      self.hideMask();
      closeWindow.call(this);
    };
    
    $.extend(Overlay.prototype, Mask);
  
})(jQuery);