Overlay div block with image when loading AJAX

Question

I know this is a simple task and a very common problem, but I can’t figure out how to do this! It seems like a five minute task, but I spent more than an hour ... I, stupid, know.
But nonetheless, please help me implement this.
I have a container container div

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

And CSS style

 .wrapper_div{ margin: auto; width: 1000px; height: 545px; } 

It looks very simple, but I cannot overlay this div when I execute an AJAX request.
I just need to show the loader animation (gif) in the center of this div block and overlay this block on a gray background, for example.
That all I want is please help. thank you

EDIT

Sorry for this explanation, the problem is not in AJAX, but in the css and html layout, I can’t figure out how to create the right layout

Answer 1

When your ajax makes a request, you have the "beforeSend" option. You can either load its overlay div or hide it on the “full” option for 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 a paragraph position or capture:

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

Answer 2

You do not have enough information about your ajax request to provide a comprehensive solution, but perhaps this will help. I just use the timeout to simulate the request and set the overlay display to 'before the timeout, and then back to' none '.

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: absolute; top: 0; left: 0; opacity: .2; }