I know this is easy task and very mon, 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

I know this is easy task and very mon, 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

• javascript
• jquery
• html
• css
• ajax

• Where is your Ajax request then ? Add a class to the wraper when you start the query and remove the class when it ends. In the css add the color you need or the background image you want associated with that class. – singe3 Commented Aug 3, 2015 at 14:03

2 Answers 2

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 'plete' 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',
    plete: 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;
}

You don't have enough detail about your ajax request to give a thorough solution, but maybe this will help. I'm just using a timeout to simulate the request, and setting the overlay display to '' before the timeout, and back to 'none' afterwards.

plnkr

<div>
  <span>My Content</span>
  <button onclick="submitForm()">Submit</button>
</div>
<div id="overlay" style="display: none;"></div>

#overlay {
  background: blue;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  opacity: 0.2;
}