With jQuery, how can I gray out and disable a webpage and then show some kind of spinner on top of that?

Question

I am still pretty "green" when it comes to web development and javascript/jQuery programming, so any help is appreciated. Here is what I want to do.

1. I want to do the same thing that a jQuery UI dialog box does where it puts a semi-transparent image over the entire page and disables clicking of any of the controls underneath.

2. I want to know how I might put some kind of spinner overlay on top to show that the website is working in the background. If I can use a animated GIF file that would be fine, but I'm not quite sure on the best approach to this.

Here is an example of the grayed-out effect with a dialog box: jQuery UI Example. I want to know how to produce this effect without the dialog box on top. I do not have a good example of the spinner behavior.

All suggestions, website referrals, and code is appreciated.

EDIT: I do not mean a "spinner control". I will try to find an example of what I am thinking of by spinner.

EDIT: What I mean by "spinner" is a loading gif of some kind like the "Indicator Big" gif on this website: http://ajaxload.info/

Answer 1

I always like to use the jQuery BlockUI plugin: http://malsup.com/jquery/block/

Check out the demos, you'll probably find something you're looking for there.

Answer 2

One way to do it is to have a div that is hidden by default and has properties to set the background colour to a grey (#666 for instance) and its transparency set to something like 0.8.

When you want to display use jQuery to get the size of the screen/browser window, set the size of your div and display it with a high zindex, so it displays on top. You can also give this div your spinner gif graphic (no repeat, and centered).

Code:

#json-overlay {     background-color: #333;     opacity: 0.8;     position: absolute;     left: 0px;     top: 0px;     z-index: 100;     height: 100%;     width: 100%;     overflow: hidden;     background-image: url('ajax-loader.gif');     background-position: center;     background-repeat: no-repeat; } 

Only things to watch out for are select elements in IE6, as these will show through the div, so you can either use jQuery bgframe to solve that, or what I have done in the past is just hide select elements when displaying the div and showing them again when hiding your div