Ormai è comune trovare le librerie jquery usate nei siti internet, per cui anche se non si può parlare di un qualcosa di così innovativo, ormai è giunta l’ora di abbandonare le vecchie finestre di popup, o meglio di reintrodurre una funzionalità utile per i siti internet, grazie a qualcosa di più moderno, sicuro ma soprattutto più efficace.

C’erano una volta i popup, finestrelle piccole che saltavano fuori in primo piano dopo aver cliccato su qualche link, o più fastidiosamente senza aver fatto nulla di particolare per volerli, solo per essere entrati su un sito. Sono diventati perlopiù uno strumento per veicolare pubblicità non desiderata, tanto che browser come Firefox li bloccano di default.

Da un po’ di tempo appunto le librerie jquery ci vengono in soccorso per poter reintrodurre queste finestre, utili per vari scopi e altrimenti escluse dalla navigazione, ci basta aggiungere una piccola libreria e uno script inserito nel codice della pagina, contenente più che altro indicazioni sullo stile della finestra, per avere a disposizione ciò che viene definito “modal popup”.

L’effetto ottico è del tutto simile a quello delle gallerie di immagini fatte con ajax lightbox: una finestra rettangolare che si sovrappone a tutto quello che c’è sullo schermo, mettendosi al centro e ponendo uno strato semitrasparente tutto intorno a sé.

L’effetto è sia visivamente gradevole, che di sicura efficacia. per i suoi scopi: il visitatore del sito, pur non cambiando pagina, non ha altra scelta che prestare attenzione ai contenuti che gli vengono proposti, non può tornare sulla vecchia pagina se non cliccando al di fuori del riquadro in evidenza, e quindi è portato a completare l’azione richiesta.

Quali generi di contenuti si possono mettere in una popup modale. Sicuramente non pubblicitari, per non spazientire il visitatore oltre misura, bensì di piccola informazione o di raccolta dati come l’iscrizione a una newsletter, insomma un contenuto così piccolo da far apparire eccessiva o laboriosa l’apertura di una nuova pagina, con tutto quel che ne consegue in termini di lentezza e distrazione da un procedimento iniziato.

Se ne raccomanda l’uso esclusivo tramite clic del mouse, evitando accuratamente l’apertura al caricamento della pagina o al rollover.

Vediamo dunque come creare una modal popup in pratica.
Tecnicamente, tra i tanti sistemi da poter utilizzare, abbiamo trovato molto interessante,questo qui
http://www.jquerypopup.com/
proprio per la sua modularità con jquery, che per funzionare richiede solo 3 semplici passi.

1) l’inclusione di uno script esterno (scaricabile anche da qui) da richiamare, oltre alla jquery
<script language="javascript" src="/js/modal.popup.js"></script>

2) l’inclusione di uno script interno di configurazione
<script language="javascript">
<!--
$(document).ready(function() {
var align = 'center';
var top = 100;
var width = 500;
var padding = 10;
var backgroundColor = '#FFFFFF';
var source = '/newsletter';
var borderColor = '#333333';
var borderWeight = 4;
var borderRadius = 5;
var fadeOutTime = 300;
var disableColor = '#666666';
var disableOpacity = 40;
var loadingImage = '/images/loading.gif';
$(".modal").click(function() {
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
});

$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
});
//–>
</script>

3) la definizione di una classe “modal” in un tag <a>
<a href="javascript:void(0);">Popup</a>
per l’elemento testuale/grafico il cui clic deve far venire fuori il riquadro.

Per approfondimenti vi rimando al sito di cui sopra. In 5 minuti sarete operativi pure voi.

Follow

Articoli correlati

• Non ci sono articoli correlati