Greyed-out "waiting" page in Javascript? [duplicate]

Question

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.

Answer 1

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>

Answer 2

Use a

<div style="position:fixed;
            z-index: 2; /* above everything else */
            top:0; left:0; bottom:0; right:0;
            background:rgba(0,0,0,.5);
"> <!-- possibly some loading-animation and/or explanation --> </div>

and add/remove it or show/hide it when you are processing.