javascript - Overlay div block with the image while AJAX loading - Stack Overflow

admin管理员组

文章数量:1320917

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

Share Improve this question Follow edited Aug 3, 2015 at 15:04 eoozesgg asked Aug 3, 2015 at 13:59 eoozesggeoozesgg 5511 gold badge11 silver badge44 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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;
}

本文标签： javascriptOverlay div block with the image while AJAX loadingStack Overflow