Con jQuery, come posso oscurare e disabilitare una pagina Web e quindi mostrare un qualche tipo di spinner in più?

Question

Sono ancora piuttosto "verde" quando si tratta di sviluppo web e programmazione javascript/jQuery, quindi qualsiasi aiuto è apprezzato. Ecco cosa voglio fare.

1. voglio fare la stessa cosa che una finestra di dialogo jQuery UI fa dove si mette un'immagine semi-trasparente sopra l'intera pagina e disabilita click di uno qualsiasi dei controlli sottostanti.

2. Voglio sapere come potrei inserire una sorta di overlay di selezione per mostrare che il sito funziona in background. Se posso usare un file GIF animato, andrebbe bene, ma non sono sicuro del miglior approccio a questo.

Ecco un esempio degli effetti in grigio con una finestra di dialogo: jQuery UI Example. Voglio sapere come produrre questo effetto senza la finestra di dialogo in alto. Non ho un buon esempio del comportamento di spinner.

Tutti i suggerimenti, i riferimenti ai siti Web e il codice sono apprezzati.

MODIFICA: Non intendo un "controllo di selezione". Cercherò di trovare un esempio di cosa sto pensando per spinner.

EDIT: Cosa intendo per "filatrice" è una gif carico di qualche tipo, come la gif "Indicatore Big" su questo sito: http://ajaxload.info/

Answer 1

Un modo per farlo è quello di avere un div che è nascosto di default e ha proprietà per impostare il colore di sfondo su un grigio (# 666 per esempio) e la sua trasparenza impostata su qualcosa come 0.8.

Quando si desidera visualizzare utilizzare jQuery per ottenere le dimensioni dello schermo/finestra del browser, impostare la dimensione del div e visualizzarlo con uno zindex alto, in modo che venga visualizzato in alto. Puoi anche dare a questo div il tuo spin gif grafico (senza ripetere e centrato).

Codice:

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

Solo cose da guardare fuori per sono selezionati elementi in IE6, in quanto questi mostreranno attraverso il div, quindi è possibile utilizzare jQuery bgframe per risolvere questo, o quello che ho fatto in passato è solo nascondere selezionare gli elementi quando si visualizza il div e mostrarli di nuovo quando si nasconde il div

Answer 2

mi piace sempre di utilizzare il plugin jQuery BlockUI: http://malsup.com/jquery/block/

Dai un'occhiata alle demo, probabilmente troverai qualcosa che stai cercando lì.

Answer 3

Perché non si usa semplicemente "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

È possibile utilizzare qualcosa come questo codice jquery.Passare l'ID dell'elemento che si vuole rimanere in cima alla pagina:

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

è possibile utilizzare semplice div e poi ajaxstart e ajaxstop evento

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

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