27

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/

Mike Webb
  • 8,855
  • 18
  • 78
  • 111
  • The first question I would ask is **why**? Why would you want to employ such non-standard behavior in your web app? The problem I see people facing when they start using jQuery is that they use so much unnecessary flash, and this seems like it might be such a case. – Josh Smith Nov 19 '10 at 18:29
  • I want to know how to accomplish all of this partly to expand my knowledge. The other reason is that I wanted to implement it to explicitly show what was going on. I have a small page now (not on the net yet) that, when a button is clicked, just sits there without any notification of what's going on while the server does what it needs to. If this is not an appropriate method, what suggestion do you have to better accomplish my task? – Mike Webb Nov 19 '10 at 18:34
  • 1
    Keep in mind I do still want to know how to accomplish all of this. If for nothing else then to learn how. – Mike Webb Nov 19 '10 at 18:35
  • 1
    Showing a small loader in that case is appropriate. Take GitHub as an example, which changes its button's styling to a "Loading..." button with a spinner inside it; that's a nice approach. More common is simply replacing the button with a small spinner. I do this with a custom made spinner: http://static.goalscdn.com/img/goalsspinner.gif. But the interaction of the grayed-out background is appropriate for modal windows, and not this use case, where it's likely going to be jarring for the end user. – Josh Smith Nov 19 '10 at 18:39

5 Answers5

58

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.

WillCodeForCoffee
  • 861
  • 5
  • 5
34

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

sudhansu63
  • 6,025
  • 4
  • 39
  • 52
mikeq
  • 817
  • 5
  • 5
  • Thanks. This seems to be the best way to handle this. – Mike Webb Dec 01 '10 at 18:11
  • 1
    I found one problem with the solution. if my page height greater than window height, then the lower part are not covering with the style . how can i achieve that? I am trying for on ajax call loading image.... – karim_fci Dec 08 '15 at 14:22
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");
        });
    });
mila
  • 471
  • 8
  • 20
2

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') );
}
Renzo Ciot
  • 3,746
  • 2
  • 25
  • 29
1

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);
    });
Pang
  • 9,564
  • 146
  • 81
  • 122
Rupesh
  • 31
  • 2