With jQuery, how can I gray out and disable a webp

问题:

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/

回答1:

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

回答2:

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.

回答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");
        });
    });

回答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') );
}

回答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);
    });