How do I show a loading picture and/or message to the user ? If possible, would I like to know how to make it full screen with grey-dimmed background. Kinda like when viewing the large picture from some galleries (sorry, no example link).

Currently do I add a CSS class which has the image and other formating, but its not working for some reason. Results from the search do get inserted into the div.

HTML

<div id="searchresults"></div>

CSS

div.loading {
  background-image: url('../img/loading.gif'); 
  background-position: center;
  width: 80px;
  height: 80px;
}

JS

$(document).ready(function(){
  $('#searchform').submit(function(){
    $('#searchresults').addClass('loading');
    $.post('search.php', $('#'+this.id).serialize(),function(result){
      $('#searchresults').html(result);
    });
    $('#searchresults').removeClass('loading');
    return false;
  });
});