Un’efficace finestra modale
Un nuovo plugin jQuery per la visualizzazione di una finestra modale si unisce alla collezione infinità già disponibile nel web. Il suo nome è Reveal ed è una novità a dir poco impressionante, non tanto per lo stile ma quanto per la facilità di implementazione, per la sua estrema ‘leggerezza’ (solo 1,75 Kb) e per il fatto che è completamente cross-browser e quindi compatibile con tutti i moderni browser (ovviamente con qualche degrado su alcuni).
Vediamo come utilizzarlo passo dopo passo.
STEP 1 – INIZIALIZZAZIONE
Inseriamo semplicemente queste tre righe nel nostro ‘head’:
/* Reveal CSS */ <link rel="stylesheet" href="reveal.css"> /* jQuery ovviamente necessario */ <script src="jquery.min.js" type="text/javascript"></script> /* Reveal plugin */ <script src="jquery.reveal.js" type="text/javascript"></script>
STEP 2 – CREAZIONE FINESTRA MODALE
Assegnamo al div ‘modale’ la classe “reveal-modal” e un ID ovviamente univoco che sarà necessario successivamente a lanciare il comando per la visualizzazione della finestra. Inoltre, l’ancora con la classe “close-reveal-modal” servirà per la generazione di un pulsante di chiusura della finestra stessa (anche se, come al solito, di default sarà sufficiente cliccare sullo sfondo perchè la finestra si chiuda). Il posizionamento ottimale di questo codice è solitamente prima della chiusura del tag body.
<div id="myModal" class="reveal-modal"> <h1>Titolo</h1> <p>Contenuto.</p> <a class="close-reveal-modal">×</a> </div>
STEP 3 – CREAZIONE DELL’EVENTO DI APERTURA
Per attivare l’apertura della finestra, sarà sufficiente inserire il codice seguente in qualsiasi parte della vostra pagina:
<a href="#" data-reveal-id="myModal">Clicca qui</a>
E’ ovviamente possibile anche utilizzare un comando javascript per l’attivazione della finestra, come ad esempio il seguente:
<script type="text/javascript"> $(document).ready(function() { $('#myButton').click(function(e) { e.preventDefault(); $('#myModal').reveal(); }); }); </script>
Ogni buon plugin ha le sue opzioni, ed anche Reveal possiede le sue:
$('#myModal').reveal({ animation: 'fadeAndPop', // Animazioni disponibili: fade, fadeAndPop, none animationspeed: 300, // Velocità animazione closeonbackgroundclick: true, // Attivazione della chiusura sul click del background dismissmodalclass: 'close-reveal-modal' // La classe del pulsante di chiusura });
[Download non trovato]
Sito autore e demo: http://www.zurb.com/playground/reveal-modal-plugin