Greyed-out "waiting" page in Javascript?

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.

I'm afraid I don't know what that is. I'm fairly new to Javascript. — asteri, Nov 12 '12 at 20:03
Some StackOverflow Questions: [div as modal in javascript](http://stackoverflow.com/questions/4502435/div-as-modal-javascript), [show html in a modal window](http://stackoverflow.com/questions/9035334/show-html-markup-in-modal-window), [modal window over all screen](http://stackoverflow.com/questions/9392393/modal-window-how-to-over-all-screen) — Chad, Nov 12 '12 at 20:04
@Chad Yes, I was in the process of looking it up. Haha. No, that's not quite what I mean. The greyed-out portion *behind* that box is what I want. I don't want the dialog in front of it. Just the grey portion behind it that stays there until a function is done executing. — asteri, Nov 12 '12 at 20:05
That is what makes the box a *modal* popup, as opposed to a regular popup. All of those links have the code necessary. All you need is some CSS and some show/hide in JS. See [this jsFiddle](http://jsfiddle.net/r77K8/1/). — Chad, Nov 12 '12 at 20:06

Darren Wainwright · Accepted Answer · 2012-11-13T17:39:46.350

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>

I can't +1 this until you move the inline styles of that div to the CSS :) — Chad, Nov 13 '12 at 16:56
@Darren how can i set `overflow of your body to hidden` as you mentioned above? sorry for the newbie question. — Albert Laure, Oct 22 '13 at 06:56
That's ok @AsshO.Le - You could put a jquery command `$("body").css("overflow","hidden");` when you want it to hide any overflow, and then `$("body").css("overflow", "auto");` when you want it to revert. — Darren Wainwright, Oct 22 '13 at 13:50

score 8 · Answer 2 · answered Nov 12 '12 at 20:06

8

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.

answered Nov 12 '12 at 20:06

Bergi

630,263
148
957
1,375

3

Better than the selected option, the selected option uses an image file which is inferior to not needing to have one linked. – BrettC Jul 11 '18 at 19:46

score 0 · Answer 3 · answered Nov 12 '12 at 20:05

0

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.

answered Nov 12 '12 at 20:05

Samuel Rossille

18,940
18
62
90

2

That could be a LOT of elements to update if the page is complex. – Chad Nov 12 '12 at 20:08
Once you add the overlay, you don't need to disable anything. Blurring it, however, is worth considering. – John Dvorak Nov 12 '12 at 20:09
Not that much, even in very large forms, you don't have hundreds of ***interactive*** elements. And you have to do it anyways, because a glasspane doesn't prevent hitting tab and using the controls with the keyboard – Samuel Rossille Nov 12 '12 at 20:10
1

@JanDvorak the overlay doesn't block keyboard interaction. You - even accidentally - use use the tab key to cycle through active elements, which can lead to strange behaviors if the user is a monkey. – Samuel Rossille Nov 12 '12 at 20:10

Greyed-out "waiting" page in Javascript?

3 Answers3

Linked