Jquery: overlay

Un primo semplice esempio di come creare un overlay con Jquery.

Per prima cosa dobbiamo caricare la versione più aggiornata delle librerie Jquery, come descritto in questo articolo.

Nllo script definiamo la classe dell'href a cui applicare la funzione (nel nostro caso la chiamiamo open), attraverso Jquery 'leggiamo' l'altezza della finestra del browser e 'agganciamo' al body il nostro overlay.

Nell'esempio le regole di formattazione dell'overlay vendono definite all'interno della chiamata del Jquery stesso.

Lo script è questo:

$(document).ready(function() {

$(".open").click(function() {

   var docHeight = $(document).height();

   $("body").append("

");

   $("#overlay")
      .height(docHeight)
      .css({
         'opacity' : 0.4,
         'position': 'absolute',
         'top': 0,
         'left': 0,
         'background-color': 'gold',
         'width': '100%',
         'z-index': 5000
      });

});
});

e verrà richiamato all'interno del documento con

a href='#' class="open"