Overlay dinamico in jQuery

In questo articolo scopriremo come creare un effetto di finestra animata in overlay grazie alle potenti librerie jQuery.

Per chi non lo sapesse per overlay si intende l’apertura di una finestra in popUp restando però nella stessa pagina di navigazione e rendendo lo sfondo “oscurato” per centrare l’attenzione sulla finestra e sul suo contenuto. Un po come avviene, ormai spesso, per le immagini.

[lightgrey_box] ATTENZIONE: Questa versione è obsoleta, ti consigliamo di leggere anche questo articolo: TrgReveal plugin  [/lightgrey_box]

Perchè fare uso dell’overlay? la risposta e’ semplice: ormai moltissimi siti ne fanno uso perche’ rendono la navigazione piu’ fluida e scorrevole, riducono i caricamenti e permettono al visitatore di avere tutte le informazioni che servono senza “gironzolare” troppo nel sito spostandosi di pagina in pagina (e magari stancandosi).

DEMO | DOWNLOAD

La teoria

Il funzionamento si basa sull’utilizzo del comando .click di jQuery che ci permette di eseguire una funzione al click del mouse. Una volta premuto sul “trigger” ovvero sul paragrafo o testo desiderato, la funzione richiama il div overlay e il box, facendoli apparire con effetto FADE. Per chiudere l’overlay sara’ sufficente creare un ulteriore trigger ( che per comodita’ chiameremo “chiudi”) che ci permettera’ di chiudere sia l’overlay che il box appena apparso.

Come misura precauzionale si può facilmente ideare una “chiusura alternativa” di sicurezza, che avviene quando l’utente (magari svogliato) clicca sulla parte scura dell’overlay.

CODICE HTML

<div class="overlay" id="overlay" style="display:none;"></div>

Questa stringa di codice imposta il div dell’overlay. Si fornisce lo stile display: none  per rendere “invisibile” il div al visitatore fino a quando non clicca sul trigger di apertura.

Subito sotto creiamo anche il div relativo al box che conterra’ il testo ( o immagini) del nostro popUp:

<div id="box">
<h1 class="titolo_box">Questo e' un overlay</h1>
		<p class="testo-box">Testo dell'overlay qui</p>
            	<p class="testo-box">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <hr />
		<p class="chiudi">X</p>
</div>  <!--fine box-->

Come vedete per creare il trigger di chiusura e’ sempre buona norma impostare una CLASSE, che sarà facilmente richiamabile con jQuery.

Il trigger di apertura invece, posizionabile a vostro piacere nel documento, assume questo aspetto:

 <p class="apri"> >> APRI L'OVERLAY</p>

Come vedete e’ ESSENZIALE impostare una classe ai vari trigger per renderli univoci e richiamabili nei nostri script.

Stile CSS

Ecco il codice per i trigger, box e overlay:

.apri{ font-size:18px; font-family:Verdana, Geneva, sans-serif; float:right; margin-right:50px;}
.chiudi{ font-size:18px; color:#000; font-weight:bold; position:absolute; right:2%; top:0%;  cursor:pointer;}
.overlay{
    background:#000;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
	cursor:pointer;
/*Trasperenza cross browser*/
opacity: .7; filter: alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";	

}

#box{ width:600px; height:400px; background-color:#FFF; display:none; z-index:+300; position:absolute; left:30%; top:20%; -moz-border-radius: 15px;  -webkit-border-radius: 15px;
border-radius: 15px;}

Come vedete non vi e’ nulla di troppo complicato solo alcune precisazioni:

– l’overlay ha impostato una trasparenza (se non vi piace potete levarla) cross-browser compatibile anche con IE7.

– Il box ha i bordi arrotondati con i CSS(3), se non vi piace potete levarlo. Essenziale anche qui, il comando display:none per rendere invisibile il popUp fino a che l’utente non lo apre.

– i trigger hanno lo stile cursor che permette di impostare che tipo di icona deve apparire al passaggio del mouse sull’elemento.

– Animiamo il tutto con jQuery

Ecco il codice completo per effettuare l’animazione. Vedi la sezione “teoria” per delucidazioni sul codice:

	$(".apri").click(
	    function(){
			$('#overlay').fadeIn('fast');
			$('#box').fadeIn('slow');
		});

		$(".chiudi").click(
	    function(){
		$('#overlay').fadeOut('fast');
		$('#box').hide();
		});

		//chiusura emergenza
		$("#overlay").click(
	    function(){
		$(this).fadeOut('fast');
		$('#box').hide();
		});

   });     //fine dom

NOTA: Occhio alle librerie! ricordati di includere le librerie jQuery all’inizio del documento dentro il tag <head> !

Far apparire l’overlay al caricamento del documento

Per far apparire l’overlay al caricamento del documento non dobbiamo far altro che modificare una riga del codice JS:

Cambiate da:

$(".apri").click(
	    function(){
		$('#overlay').fadeIn('fast');
		$('#box').fadeIn('slow');
		});

In:

$(document).ready(function() {

//[...]

   $('#overlay').fadeIn('fast');
   $('#box').fadeIn('slow');

//[...]

In questo modo subito dopo che il documento sarà pronto, faremo apparire l’overlay dinamico. In parola povere viene bypassato il trigger “apri”, ovviamente dopo il codice di cui sopra continuate a scrivere il codice per poter chiudere l’overlay appena apparso 😉

– Lentezza con IE8

E’ risaputo ormai che ie8 ha un motore javascript troppo obsoleto e pertanto le animazioni jQuery risultano più “scattose”. Per ovviare a tal problema e’ possibile decidere cosa eseguire se il browser riconosce IE8 (o precedenti).

Ecco il codice:

if ( $.browser.msie && $.browser.version < 9 ) {
//script da eseguire CON IE
$(".apri").click(
 function(){
$("#overlay").show();
$("#box").show();
} else {
//script da eseguire senza IE
//script normale

In questo modo se viene rilevata una versione di IE inferiore alla 9 il box e l’overlay appariranno senza animazioni, rendendo il tutto fluido. Per tutti gli altri browser invece l’animazione restera’ uguale a prima.

NB: E’ possibile attribuire anche un immagine (al posto della X) al trigger di chiusura, in modo estremamente facile grazie al tag <img> html.

Enjoy! scrivete nei commenti se vi e’ stato utile!