Mit jQuery, wie kann ich grau aus und deaktivieren Sie eine Webseite und dann zeigen eine Art von Spinner oben auf, dass?

Question

Ich bin immer noch ziemlich "grün", wenn es um Web-Entwicklung und javascript/jQuery Programmierung kommt, so dass jede Hilfe geschätzt wird. Hier ist, was ich tun möchte.

1. Ich möchte die gleiche Sache tun, die ein jQuery UI-Dialogfeld tut, wo es ein halbtransparentes Bild über die gesamte Seite und deaktiviert das Klicken eines der Steuerelemente darunter.

2. Ich möchte wissen, wie ich eine Art Spinner-Overlay darüber legen kann, um zu zeigen, dass die Website im Hintergrund arbeitet. Wenn ich eine animierte GIF-Datei verwenden kann, die in Ordnung wäre, aber ich bin nicht ganz sicher, auf den besten Ansatz für diese.

Hier ist ein Beispiel für den ausgegrauten Effekt mit einem Dialogfeld: jQuery UI Beispiel . Ich möchte wissen, wie ich diesen Effekt ohne das Dialogfeld im oberen Bereich erzielen kann. Ich habe kein gutes Beispiel für das Spinner-Verhalten.

Wir sind für alle Vorschläge, Website-Verweise und Codes dankbar.

EDIT : Ich meine nicht eine "Spinner-Steuerung". Ich werde versuchen, ein Beispiel dafür zu finden, was ich mit "Spinner" meine.

EDIT : Was ich mit "Spinner" meine, ist eine Art Lade-Gif wie das "Indicator Big"-Gif auf dieser Website: http://ajaxload.info/

Answer 1

Ich verwende immer gerne das jQuery BlockUI Plugin: http://malsup.com/jquery/block/

Schauen Sie sich die Demos an, wahrscheinlich finden Sie dort etwas, das Sie suchen.

Answer 2

Eine Möglichkeit, dies zu tun, besteht darin, ein Div zu haben, das standardmäßig ausgeblendet ist und über Eigenschaften verfügt, mit denen die Hintergrundfarbe auf ein Grau (z. B. #666) und die Transparenz auf etwas wie 0,8 eingestellt werden.

Wenn Sie anzeigen möchten, verwenden Sie jQuery, um die Größe des Bildschirms/Browser-Fensters zu ermitteln, legen Sie die Größe Ihres Divs fest und zeigen Sie es mit einem hohen zindex an, damit es oben angezeigt wird. Sie können auch dieses div Ihre Spinner gif Grafik (keine Wiederholung, und zentriert).

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;
}

Das Einzige, worauf man achten muss, sind Select-Elemente im IE6, da diese durch das Div hindurch sichtbar werden. Man kann also entweder jQuery bgframe verwenden, um das Problem zu lösen, oder, was ich in der Vergangenheit getan habe, ist, Select-Elemente auszublenden, wenn man das Div anzeigt, und sie wieder anzuzeigen, wenn man das Div ausblendet

Answer 3

Warum verwenden Sie nicht einfach "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

Sie können etwas wie diesen Jquery-Code verwenden. Übergeben Sie die ID des Elements, das Sie oben auf der Seite bleiben wollen:

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

Sie können einfache div und dann ajaxstart und ajaxstop Ereignis verwenden

<div id="cover"></div>

$('#cover')
    .hide()
    .ajaxStart(function () {
        $(this).fadeIn(100);
    })
    .ajaxStop(function () {
        $(this).fadeOut(100);
    });