disign.it | Jquery: overlay | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 2.610 visualizzazioni

Jquery: overlay

22/11/2012

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"

← PHP: utilizzo della classe Dbconnect Htaccess: impostare il sito in modo manutenzione →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.