Mit jQuery, wie kann ich eine Webseite ausgrauen und deaktivieren und dann noch eine Art Spinner anzeigen?

Question

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

1. Ich will das Gleiche tun, dass ein jQuery UI Dialogfeld tut, wo es ein halbtransparentes Bild über die gesamte Seite legt und deaktiviert Klicken eines der unter Kontrollen.

2. Ich möchte wissen, wie ich eine Art Spinner-Overlay auf die Oberseite stellen könnte, um zu zeigen, dass die Website im Hintergrund arbeitet. Wenn ich eine animierte GIF-Datei verwenden kann, wäre das in Ordnung, aber ich bin mir nicht sicher, wie ich das am besten angehen soll. Hier

ist ein Beispiel für den grau-out-Effekt mit einem Dialogfeld: jQuery UI Example. Ich möchte wissen, wie man diesen Effekt ohne das Dialogfeld oben erzeugt. Ich habe kein gutes Beispiel für das Spinnerverhalten.

Alle Vorschläge, Website-Verweise und Code wird geschätzt.

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

EDIT: Was ich mit "Spinner" bedeuten, ist ein Laden gif irgendeiner Art wie die "Indikator Big" gif auf dieser Website: http://ajaxload.info/

Answer 1

Ein Weg, dies zu tun, ist ein div, das standardmäßig ausgeblendet ist und Eigenschaften hat, um die Hintergrundfarbe auf ein Grau zu setzen (zum Beispiel # 666) und seine Transparenz auf etwas wie 0,8 gesetzt.

Wenn Sie jQuery verwenden möchten, um die Größe des Bildschirm-/Browserfensters zu erhalten, legen Sie die Größe Ihres div fest und zeigen Sie es mit einem hohen Zindex an, so dass es oben angezeigt wird. Sie können dieses Div auch Ihrer Spinner-Gif-Grafik geben (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; 
} 

nur Dinge zu achten sind ausgewählte Elemente in IE6, da diese durch die div zeigen werden, so können Sie entweder jQuery bgframe verwenden, das zu lösen, oder was ich habe in der Vergangenheit getan ist nur ausblenden Elemente beim Anzeigen der div und zeigt sie wieder, wenn Sie Ihre div

Answer 2

ich immer das jQuery BlockUI Plugin verwenden möchte: http://malsup.com/jquery/block/

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

Answer 3

verstecken Warum verwenden Sie nicht nur "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 einfach div und dann ajaxstart und ajaxstop Ereignis verwenden können

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

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