Greyed-out "waiting" page in Javascript?

html, javascript, user-input, user-interface, wait

Solution

I tend to use a simple `div` and some `javascript` to do this sort of thing.

So for example, in your page create a `div`, which will function as your grey-out.

      <div id="blackout" style='background-image:url(someSemiTransparent.png); display:none;"></div>

Then style it like so:

      #blackout {
      width:100%;
      height:100%; /* make sure you have set parents to a height of 100% too*/
      position: absolute;
      left:0; top:0;
      z-index:10 /*just to make sure its on top*/}

Then when your process is about to begin you can call (to show it):

      document.getElementById('blackout').style.display = 'block';

And once its done you can hide it again by:

      document.getElementById('blackout').style.display = 'none';

When you do show it, you may want to set the `overflow` of your `body` to `hidden`, then back to `auto` too, this will prevent the user scrolling and only seeing partial blackout.

Now I normally use `jquery` for the `show` and `hide` though am pretty sure the `javascript` above is correct..

Update:

To keep everything much tidier, as Chad mentions, you're better off putting all styling into CSS. I.E.

  #blackout {
     width:100%;
     height:100%; /* make sure you have set parents to a height of 100% too*/
     position: absolute;
     left:0; top:0;
     z-index:10 /*just to make sure its on top*/
     background-image:url(someSemiTransparent.png); 
     display:none;}

and remove the style from the `DIV`. I.E

      <div id="blackout"></div>

Problem

Possible Duplicate: Div as modal - javascript Is there a way to somehow lock a page in Javascript until a function call is complete? What I have in mind is like a semi-transparent grey cover that prevents any other user actions such as mouse-overs or button clicks until the current request is done processing. The look-and-feel doesn't matter quite as much as the functionality, though. I haven't been able to find anything that does this. Most "solutions" to this problem simply say to wait to load the other HTML elements until you're done with whatever processing you're performing, but in this particular circumstance, all the options are already present on the screen. I want to be able to prevent the user from performing another action from the page until the current request is complete.

Original source

Related problems