jquery.fullmodal.js

(function($){
  // Set up the overlay as a DOM node, we'll swap it in and out of the DOM
  var $overlay = $('<div></div>');
  var $overlay_content = $('<div></div>');
  $overlay_content.css({
    'width'     : '25em',
    'margin'    : '100px auto',
    'border'    : '1px solid #000',
    'padding'   : '15px',
    'text-align': 'center',
    'background-color':'#fff'
  });
  $overlay.append($overlay_content);

  $.fn.modal = function(options, callback){
    if(typeof(options)==='function'){
      callback = options;
      options = {};
    }
    if(!options) options = {};
    $overlay.css({
      'position'   : 'fixed',
      'left'       : '-10000px',
      'top'        : '0px',
      'width'      : '100%',
      'height'     : '100%',
      'text-align' : 'center',
      'z-index'    : '500',
      'background-color':'#ccc'
    });
    $overlay.css(options.css || {});
    if(!callback) callback = function(){};
    if($.is_modal_showing()) return this;
    $overlay_content.html(this[0].cloneNode(true));
    $(options.within || document.body).append($overlay);
    // This is just to workaround the element not being ready to fade in properly until it was faded out first.
    $overlay.fadeOut(1, function(){
      $overlay.css({'left' : '0px'}).fadeIn(callback);
    });
    return this;
  };
  $.is_modal_showing = function(){ return($(document.body).has($overlay).length == 1); };
  $.fn.toggle_modal = function(){
    if($.is_modal_showing()) $.close_modal();
    else $(this).as_modal();
    return this;
  };
  $.close_modal = function(){
    $overlay.fadeOut(function(){
      $overlay.remove();
    });
  };
})(jQuery);