Greyed-out page "wait" in Javascript?

Question

Possible duplicate:
Div as modal - javascript

Is there a way to lock a page in Javascript until the function call completes? What I mean is like a translucent gray coating that prevents any other user actions, such as mice or buttons, until the current request is completed. However, the appearance does not matter as functionality.

I could not find anything that would do this. Most of the "solutions" to this problem simply say to wait for other HTML elements to load until you are done with any processing that you are doing, but in this particular case all parameters are already on the screen. I want the user to be able to perform another action from the page before completing the current request.

Answer 1

I usually use simple div and some javascript to do such things.

So, for example, on your page, create a div that will function as your gray.

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

Then create it like this:

  #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 after its completion, you can hide it again:

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

If you show it, you can set your body overflow to hidden , and then return to auto too, this will prevent the user from scrolling and only viewing partial dimming.

Now I usually use jquery for show and hide , although I'm sure javascript more accurate.

Update:

For everything to be much more neat, as Chad mentions, you'd better put all the styles in 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

 <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 during processing.

Answer 3

Interactive elements have an “disabled” attribute, which you can set to “disabled” to prevent them from emitting events.

You can put it in the “off” state before processing and put them back in “” to re-enable them at the end of your process.

I would recommend using jQuery to simply select an interesting element, while keeping the selector in memory during the process, so that you can use it to re-enable elements after the process.

Thus, you can add cute user interface elements, such as a glass panel, to emphasize a face that is turned off on your screen.