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

jquery-ui overlay
Mike Webb picture Mike Webb · Nov 19, 2010 · Viewed 73.4k times · Source

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

WillCodeForCoffee picture WillCodeForCoffee · Nov 19, 2010

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.

Related questions

jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from jQuery UI as the stand alone picker. I have this code: <div id="datepicker"></div> And the following JS: $('#datepicker').datepicker(); When I try to return the value …

Read More
Find out whether radio button is checked with JQuery?

I can set a radio button to checked fine, but what I want to do is setup a sort of 'listener' that activates when a certain radio button is checked. Take, for example the following code: $("#element").click(function() { $('#…

Read More
check / uncheck checkbox using jquery?

I have some input text fields in my page and am displaying their values using JavaScript. I am using .set("value","") function to edit the value, add an extra checkbox field, and to pass a value. Here I want to …

Read More