overlay your form while Ajax in progress

overlay.js

// Usage:
//
//  simply show it:
//    $('#content .my_form').overlay().show()
//
//  show with custom CSS options:
//    $('#content .my_form').overlay().show({width: '500px',opacity: 0.5})
//
//  hide it:
//    $('#content .my_form').overlay().hide()
//
//  advanced - if ajax response resizes the target object, then you need to update width or height
//    $.ajax({....,
//      complete: function(data){
//        $('#content').html(data)
//        $('#content').overlay().css({height: $('#content').height()})
//    }})
//
//  CSS example
//  ==============
//    .ow {
//      background-image:url('/images/ajax-loader3.gif');
//      background-repeat:no-repeat;
//      background-position:center;
//    }
//
var overlay_css_class = 'ow'; // you can change this

jQuery.fn.overlay = function(){
  var target = this
  return {
    show: function(css_options){
      if(target.length == 1){
        var css_data = $.extend({
          position: 'absolute',
          top: target.position().top,
          left: target.position().left,
          height:target.outerHeight(),
          width: target.outerWidth(),
          opacity: 0.7,
          'z-index': 100,
          'background-color': 'white'
        }, typeof(css_options) != 'undefined' ? css_options : {})
        var ow = target.prev('div .'+overlay_css_class)
        if(ow.length == 0){
          ow = $('<div class="'+overlay_css_class+'"/>')
          ow.css(css_data)
          ow.insertBefore(target)
        }else{
          ow.css(css_data)
          ow.show()
        }
      }
    },
    hide: function(){
      var ow = target.prev('div .'+overlay_css_class)
      if(ow.length == 1){
        ow.hide()
      }
    },
    css: function(data){
      return target.prev('div .'+overlay_css_class).css(data)
    }
  }
}