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

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

Answer 3

Why don't you just use "modal:true"?
$(function () {
$("#dialog").dialog($.extend({}, dialogOptions, {
autoOpen: false,
width: 500,
modal: true,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
}
}));
$("#profile_edit").click(function () {
$("#dialog").dialog("open");
});
$("#save_and_close").click(function () {
$("#dialog").dialog("close");
});
});

Answer 4

You can use something like this jquery code. Pass the id of the element that you want to stay on top of the page:
function startModal(id) {
$("body").prepend("<div id='PopupMask' style='position:fixed;width:100%;height:100%;z-index:10;background-color:gray;'></div>");
$("#PopupMask").css('opacity', 0.5);
$("#"+id).data('saveZindex', $("#"+id).css( "z-index"));
$("#"+id).data('savePosition', $("#"+id).css( "position"));
$("#"+id).css( "z-index" , 11 );
$("#"+id).css( "position" , "fixed" );
}
function stopModal(id) {
if ($("#PopupMask") == null) return;
$("#PopupMask").remove();
$("#"+id).css( "z-index" , $("#"+id).data('saveZindex') );
$("#"+id).css( "position" , $("#"+id).data('savePosition') );
}

Answer 5

you can use simple div and then ajaxstart and ajaxstop event
<div id="cover"></div>
$('#cover')
.hide()
.ajaxStart(function () {
$(this).fadeIn(100);
})
.ajaxStop(function () {
$(this).fadeOut(100);
});