Overlay div block with the image while AJAX loading

Question

I know this is easy task and very common, but I cannot figure out how to do this ! It seems five minute task, but I have spent more than an hour... I am stupid I know.
But nevertheless, please help me to implement this.
I have div container block

<div class="wrapper_div">
//some other divs here
    </div>

And CSS style

.wrapper_div{

    margin: auto;

    width: 1000px;

    height: 545px;

}

Looks very simple, but I cannot overlay this div when making AJAX request.
I need to simply show loader animation (gif) at the center of this div block and overlay this block with grey background for instance.
That's all what I want, please help. Thank you

EDIT

Sorry for such explanation, the problem is not in AJAX but in css and html layout, I cannot figure out how to create correct layout

Solution

When your ajax makes a request you have the 'beforeSend' option. You can either have it load your overlay div and hide it on the 'complete' option for the ajax.

    $.ajax({

    url: "/Home/SomeThing",
    data: {name: name},
    error: function () {

    },
    beforeSend: function () { ShowLoadingScreen(); }, // <Show OverLay

    success: function (data)        
        $('#UnitAjaxDump').html(data);
    },
    type: 'GET',
    complete: function () { HideLoadingScreen(); } //<Hide Overlay

In your css you need your overlay to either have an absoute position or fixed as well:

#overlay{
   position: fixed;
top:50%;
left:50%;
width:500px;
height:500px;
margin-left:-250px;
margin-top:-250px;
background: somebackground;
}