Quando iniziai a sviluppare e-learning (con Adobe Flash), uno dei primi problemi con cui mi scontrai furono i pop-up da integrare ai vari learning objects, grazie a storyboards che ne traboccavano letteralmente! Anche se con Flash le cose sono più semplici e immediate (a patto di conoscere l’Actionscript), nonché più gradevoli dal punto di vista prettamente estetico, jQuery ha una caterva di soluzioni adatte al medesimo scopo con risultati molto interessanti. Uno di questi è Reveal, il plugin per pop-up che vi presentiamo quest’oggi. Scarichiamo subito il materiale nello zip alla fine dell’articolo, e vediamo quali righe integrare nell’<head> dell’index:
<link rel="stylesheet" href="reveal.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> <script type="text/javascript" src="jquery.reveal.js"></script>
Nel <body> abbiamo 3 modalità differenti, attivate dai differenti comandi “data-reveal-id” e “data-animation”:
<a href="#" class="big-link" data-reveal-id="myModal"> Fade and Pop </a> <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade"> Fade </a> <a href="#" class="big-link" data-reveal-id="myModal" data-animation="none"> None </a>
Nel primo caso (di default), il pop-up cade dall’alto. Nel secondo caso, viene visualizzato nel layout tramite un semplice fade-in. Nel terzo e ultimo caso, appare senza alcun effetto o transizione. In tutti e tre i casi, la visualizzazione del pop-up attiva l’overlay del background con un alpha trasparente.
Nel seguente <div> viene digitato il testo e il titolo contenuti nel pop-up:
<div id="myModal" class="reveal-modal"> <h1>Reveal Modal Goodness</h1> <p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p> <a class="close-reveal-modal">×</a>
Come vedete dalla demo, il testo è di default per tutti e tre i casi. Creiamo dunque nel Css nuovi Id e sostituiamo nell’<h1> e nel <p> titolo e testi, e riportiamo i relativi Id nei <div> da “esplodere”.
Tutto chiaro? Alla prossima!
Pacman
Nostradamus
Magical Cat Adventure
Snake