Question

5

Jquery-How to grey out the background while showing the loading icon over it

rated 0 times [ 11] [ 6] / answers: 1 / hits: 109988 / 9 Years ago, sun, march 8, 2015, 12:00:00

I'm trying to grey out the background when a user clicks on the submit button and show the loading icon over the greyed background.

below is the icon im trying to show, however I'm not able to show the animation, the icon just stays still.

enter

Here is my html:

 <div class=container></div>

 <div id=loading-img style= z-index: 20;display:none;></div>

 <button id=button>Submit</button>

JS:

 $(#button).click(function() {

    $(#container).css(opacity,0.5);

    $(#loading-img).css({display: block});

}

I'm not sure how exactly to use the css for making the icon animate over the grey background. Any ideas please??
EDIT::::

Fiddle: http://jsfiddle.net/hnk6bLbt/1/

Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

devonw

Add To Favorites

Follow

Total Points: 311

Total Questions: 116

Total Answers: 111

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

devonw questions

1 How to set up Vue 3 parent component to emit event to child component

Thu, Apr 21, 22, 00:00, 2 Years ago

1 How to update item quantity in the shopping cart using React Redux

Wed, Jul 21, 21, 00:00, 3 Years ago

1 TypeError: request.getHeader is not a function

Wed, Jul 21, 21, 00:00, 3 Years ago

1 Updating one of the Formik initial values with state resets all other values

Thu, Feb 25, 21, 00:00, 3 Years ago

1 PM2 - Incorrect memory usage reading & possible memory leak with Node.js application

Wed, Dec 25, 19, 00:00, 5 Years ago

View All

answered 9 Years ago ronaldodarioc · Accepted Answer

I reworked the example you provided in the js fiddle : http://jsfiddle.net/zravs3hp/

Step 1 :

I renamed your container div to overlay, as semantically this div is not a container, but an overlay. I also placed the loader div as a child of this overlay div.

The resulting html is :

<div class=overlay>

    <div id=loading-img></div>

</div>





<div class=content>

    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit. ...</div>

    <button id=button>Submit</button>

</div>

The css of the overlay is the following

.overlay {

    background: #e9e9e9;  <- I left your 'gray' background

    display: none;        <- Not displayed by default

    position: absolute;   <- This and the following properties will

    top: 0;                  make the overlay, the element will expand

    right: 0;                so as to cover the whole body of the page

    bottom: 0;

    left: 0;

    opacity: 0.5;

}

Step 2 :

I added some dummy text so as to have something to overlay.

Step 3 :

Then, in the click handler we just need to show the overlay :

$(#button).click(function () {

    $(.overlay).show();

});