A simple way to make a centered layer with jQuery

jquery.layer.js

/*
 * jQuery jquery.layer.js
 * Copyright (c) 2008 Justin Poliey <[email protected]>
 * A simple inline layer function for jQuery
 *
 * Permission to use, copy, modify, and/or distribute this software for any
 * purpose with or without fee is hereby granted, provided that the above
 * copyright notice and this permission notice appear in all copies.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 */
 
jQuery.layer = function() {
  
  /* Take care of function arguments */
  options = arguments[0] ? arguments[0] : {};
  settings = jQuery.extend({
    'id' : '',
    'width' : 'default',
    'height' : 'default',
    'content' : '<div></div>',
    'bgcolor' : '#000000',
    'opacity' : '0.5'
  }, options);
  
  /* Create a jQuery object of the layer */
  layer = {};
  if (settings.id != '') {
    layer = jQuery('#' + settings.id).addClass('layer').hide();
    if (!layer.length) {
      return;
    }
  }
  else {
    content = (settings.content.constructor == Array) ? settings.content.join('') : settings.content;
    layer = jQuery(content).addClass('layer').appendTo('body').hide();
  }
  old_height = layer.height();
  old_width = layer.width();
  settings.height = (settings.height == 'default') ? layer.height() : settings.height;
  settings.width = (settings.width == 'default') ? layer.width() : settings.width;
  
  
  /* Fade the screen to black (or any other color) */
  jQuery('<div></div>').css({
    'position' : 'absolute',
    'top' : '0',
    'left' : '0',
    'width' : jQuery(window).width(),
    'height' : jQuery(window).height(),
    'z-index' : '1',
    'background-color' : settings.bgcolor,
    'opacity' : settings.opacity
  }).addClass('layer-bg').appendTo('body').hide().fadeIn();
  
  /* Resize the window nicely */
  jQuery(window).resize(function () {
    jQuery('.layer-bg').css({
      'width' : jQuery(window).width(),
      'height' : jQuery(window).height()
    });
    jQuery('.layer').css({
      'top' : jQuery(window).height()/2 - settings.height/2,
      'left' : jQuery(window).width()/2 - settings.width/2
    });
  });
  
  /* Pop up the layer! */
  layer.css({
    'overflow' : 'hidden',
    'position' : 'absolute',
    'width' : settings.width + 'px',
    'height' : settings.height + 'px',
    'top' : jQuery(window).height()/2 - settings.height/2,
    'left' : jQuery(window).width()/2 - settings.width/2,
    'z-index' : '2'
  }).fadeIn('normal', function() {
    jQuery('.layer-bg').click(function () {
      (settings.id != '') ? layer.width(old_width).height(old_height).hide() : layer.remove();
      jQuery('.layer-bg').unbind('click').remove();
      jQuery(window).unbind('resize');
    });
  });
  
};