How to shadow everything and disable all other jQuery functions on ajax call

Question

I have this ajax function:

function callpage() {
    $('#formcontent').empty().html('<p class="vent">Pleace wait</p>');
    var form = $('form#sog');
    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
        success: function(msg) {
            $('#formcontent').css("border", "none").html(msg);
        }
    });
}

When it is called I want to shadow everthing else, then the formcontent div and all other jquery functions should be disabled until the ajax call has succeeded.

Update:
My toggle function that should be disabled when callpage is called until it is succeeded:

$('#search').hover(
    function () {
        $('#search').animate({width: '400px'}, 500, function() {});
    },
    function () {
        $('#search').animate({width: '200px'}, 500);
        callpage();
    }
);

Answer 1

You could call an overlay when the AJAX call start with AJAXStart and then hide it with ajaxComplete

$(document).ajaxStart(function(){
   $("#overlay").show();
 });

$(document).ajaxComplete(function(){
   $("#overlay").hide();
 });

Or you can put everything in the call:

    $.ajax({
            type: form.attr('method'),
            beforeSend: function(){$("#overlay").show();},
            complete: function(){$("#overlay").hide();},
            url: form.attr('action'),
            data: form.serialize(),
            success:function(msg){$('#formcontent').css("border", "none").html(msg);}
            });

EDIT i take the overlay from the other answer

#modal-overlay {
    position: fixed;
    z-index: 10;
    background: black;
    display: block;
    opacity: .75;
    filter: alpha(opacity=75);
    width: 100%;
    height: 100%;
}

For your function you could add some extra logic and check if the overlay is visible or not

 $('#search').hover( 
  function () {
        var overlayDisplayed = $("#overlay").is(":visible");
        if(!overlayDisplayed){
          $('#search').animate({width: '400px'}, 500, function() { });
         }
  },
  function () {
        var overlayDisplayed = $("#overlay").is(":visible");
        if(!overlayDisplayed){
          $('#search').animate({width: '200px'}, 500);
          callpage();
         }
  }
);

Answer 2

People usually code an overlay div with the CSS like:

#modal-overlay {
    position: fixed;
    z-index: 10;
    background: black;
    display: block;
    opacity: .75;
    filter: alpha(opacity=75);
    width: 100%;
    height: 100%;
}

So, when it's loading you just call $("#modal-overlay").show() (or $("#modal-overlay").fadeIn()) and when it finishes loading you just call $("#modal-overlay").hide() (or $("#modal-overlay").fadeOut()).

This div goes over all the rest of the elements so you don't need to disable all the other jQuery functions.