Greyed-out “waiting” page in Javascript? [duplicate]

问题

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.

回答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>

回答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.

回答3:

Interactive elements have a "disabled" attribute which you can set to "disabled" to prevent them from emitting events.

You can position it to "disabled" before your processing, and position them back to "" to re-enable them at the end of your process.

I would recommend using jQuery to easily select the interesting element, keeping the selector result in memory during the process to use it to re-enable the elements after the process.

That being done, you can add pretty UI elements like a glass pane to emphasize the face that your screen is disabled.

来源：https://stackoverflow.com/questions/13350663/greyed-out-waiting-page-in-javascript

标签

javascript

html

user-interface

user-input

wait