Finestre modali

In questa lezione vedremo come usare w3.css per implementare le cosiddette finestre modali, ovvero finestre costruite all'interno della pagina tramite elementi HTML (diverse, quindi, dalle finestre di dialogo prodotte da funzioni come window.alert e window.prompt del linguaggio Javascript) che si sovrappongono al contenuto della pagina stessa, catturando dunque l'attenzione del navigatore. Queste finestre risultano perfette per la produzione di messaggi importanti o controlli che si pongono al di sopra di tutto il resto.

Sintassi ed API

Per produrre le nostre finestre modali abbiamo a disposizione fondamentalmente due classi:

• la classe w3-modal, che permette di produrre il contenitore del modale, ovvero il cosiddetto "overlay" che consente di separare il contenuto della finestra creata dal resto della pagina, posizionandola al di sopra di quest'ultima
• la classe w3-modal-content, che contrariamente permette di produrre il contenuto del modale

Il contenuto delle finestre modali prodotto con w3.css può fondamentalmente essere costituito da qualsiasi elemento HTML: div, intestazioni, paragrafi, immagini, iframe, e cosi via.

Ovviamente per la realizzazione dell'apparizione e della scomparsa della finestra modale avremo bisogno anche di codice Javascript, utlizzando un controllo molto semplice.

Creare l'HTML

A questo punto siamo pronti per partire nella stesura della struttura della finestra modale. Il div esterno avrà classe w3-modal, mentre il div interno avrà classe w3-modal-content. Quest'ultimo avrà il compito di mostrare concretamente il contenuto della finestra. Il div più esterno sarà inoltre dotato di un attributo id che ci permetterà di andare a lavorare con il suddetto elemento tramite Javascript.

Vediamo dunque un semplice esempio:

<div id="box" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('box').style.display='none'"
class="w3-button w3-display-topright">&times;</span>
<p>Contenuto testuale</p>
<p>Contenuto testuale</p>
</div>
</div>
</div>

Il contenuto della finestra modale è in questo caso racchiuso in un elemento div avente classe w3-container, che a sua volta contiene:

• un elemento span che avrà la funzione di pulsante di chiusura della finestra modale, a cui è agganciato un gestore degli eventi tramite attributo HTML onclick. Quando l'utente cliccherà sopra questo elemento, infatti, il modale verrà chiuso. Questo span ha come contenuto l'enetià HTML × che permette di generare una X
• due elementi p che indicano il contenuto testuale della finestra

A questo punto dobbiamo creare il controllo che ci permette di produrre la finestra modale. Di solito i modali vengono lanciati quando l'utente clicca sopra un determinato pulsante o elemento HTML, ma non abbiamo limiti in questo senso. Vediamo come procedere:

<button onclick="document.getElementById('box').style.display='block'"
class="w3-button">Apri finestra modale</button>

Il pulsante è un elemento di tipo button avente classe w3-button che ci permette di stilizzare l'elemento dandogli un'estetica perfetta per un pulsante/bottone che permette di azionare un determinato controllo. Questo elemento è dotato inoltre di un gestore degli eventi HTML (l'attributo onclick) che permette di azionare l'effetto mostrando la finestra. Proprio per questo motivo, andiamo a recuperare l'elemento contenitore che identifica il modale, che ha id impostato al valore box, grazie al metodo getElementById dell'oggetto document, e impostiamo il suo valore CSS display al valore block tramite la proprietà style.

A questo punto abbiamo completato il nostro obiettivo: possiamo provare a richiamare il modale cliccando sul pulsante: la finestra comparirà sopra un elemento che coprirà l'intera pagina, avente uno sfondo scuro, rendendo la finestra modale l'elemento di prima importanza nella pagina. Cliccando sul precedente elemento span potremo infine chiudere la suddetta finestra e tornare alla precedente navigazione.

Personalizzazione del contenuto

A questo punto abbiamo il totale controllo sulle nostre finestre modali: modificando il loro contenuto possiamo personalizzare con stile il loro aspetto e la loro funzionalità. Vediamo ad esempio come possiamo produrre una finestra modale dotata di 3 elementi costitutivi:

• un header, che funge da titolo della finestra modale, e che contiene l'elemento span che si occupa della chiusura della finestra stessa
• un div che conterrà il contenuto testuale (o multimediale) del modale
• un footer che chiude la finestra con informazioni conclusive

div id="box" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-red">
<span onclick="document.getElementById('box').style.display='none'"
class="w3-button w3-display-topright">&times;</span>
<h2>La mia finestra modale</h2>
</header>
<div class="w3-container">
<p>Contenuto testuale</p>
<p>Contenuto testuale</p>
</div>
<footer class="w3-container w3-red">
<p>Copyright 2019</p>
</footer>
</div>
</div>

Aggiungiamo lo stesso identico pulsante di prima che ci permetterà di azionare l'effetto:

<button onclick="document.getElementById('box').style.display='block'"
class="w3-button">Apri finestra modale</button>

ed il nostro controllo modale è completato.

Immagini modali

La potenza delle finestre modali di w3.css sta nel fatto che, come dichiarato, possiamo utilizzare qualsiasi elemento HTML come trigger dell'effetto e qualsiasi contenuto come contenuto del modale stesso. Ad esempio, possiamo produrre un interessante effetto tramite la realizzazione di immagini modali: quando cliccheremo su di un'immagine che funge da miniatura, potremo visualizzare l'immagine ingrandita sotto forma di modale. Vediamo come:

<img src="miaimmagine.jpg" style="cursor:zoom-in"
onclick="document.getElementById('box').style.display='block'">
<div id="box" class="w3-modal" onclick="this.style.display='none'">
<span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>
<div class="w3-modal-content">
<img src="miaimmagine.jpg" style="width:100%">
</div>
</div>

Il pulsante che aziona l'effetto ora non è più un pulsante ma un elemento img, dotato di un cursore particolare che indica all'utente che può cliccare sull'immagine per ingrandirla. La finestra modale sarà dotata di un'immagine a grandezza natuale.

Galleria di immagini modali

Possiamo spingerci oltre, creando una galleria di immagini modali. Per farlo, andiamo a produrre:

• un template di 3 immagini posizionate in linea orizzontale, grazie alle classi per la produzione di layout w3-third
• il template per la finestra modale, il cui elemento contenitore conterrà il solo elemento immagine a cui andremo a modificare il valore dell'attributo src (tramite Javascript) al click sulle nostre immagini, e che possiede direttamente la classe w3-modal-content. In questo caso infatti non abbiamo bisogno di un elemento che contiene testi o altri tipi di contenuti nel modale: la nostra immagine è essa stessa il contenuto finale
• infine, un semplice codice Javascript che definisce una funzione che permette di modificare il valore dell'attributo src della nostra immagine modale, che corrisponderà al valore dell'attributo src dell'immagine su cui ha cliccato l'utente, dotata di apoosito gestore degli eventi

<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="immagine1.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img src="immagine2.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img src="immagine3.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>
<div id="box" class="w3-modal" onclick="this.style.display='none'">
<img class="w3-modal-content" id="image" style="width:100%">
</div>
<script>
function onClick(element) {
document.getElementById("image").src = element.src;
document.getElementById("box").style.display = "block";
}
</script>

La funzione onClick modifica l'attributo src dell'elemento con ID image (ovvero la nostra immagine modale e lo imposta al valore dell'attributo src dell'elemento su cui ha cliccato l'utente (la miniatura). Il risultato è davvero interessante.

Form modale

A questo punto possiamo ribadire con ancora più enfasi il concetto che tutto, all'interno della pagina HTML, può essere reso modale, tramite il framework w3.css: possiamo dare sfogo alla nostra fantasia per produrre una moltitudine di controlli. Un esempio interessante è rappresentato dai form modali: possiamo lanciare un modulo di compilazione in sovrimpressione attraverso la sua installazione nella struttura w3-modal. Per fare questo andiamo a produrre nella nostra demo un semplice form composto da un campo di input per il nome utente, un campo di input per la password, un pulsante per l'invio del modulo ed un link per il recupero della password smarrita. L'estetica è arricchita da immagini e da classi w3.css:

<div id="box" class="w3-modal">
<div class="w3-modal-content w3-card-4" style="max-width:600px">
<div class="w3-center"><br>
<span onclick="document.getElementById('box').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">&times;</span>
<img src="logo.png" alt="Logo form" style="width:30%" class="w3-circle w3-margin-top">
</div>
<form class="w3-container" action="/action_page.php">
<div class="w3-section">
  <label><b>Username</b></label>
  <input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="Digita Username" name="usrname" required>
  <label><b>Password</b></label>
  <input class="w3-input w3-border" type="password" placeholder="Digita Password" name="psw" required>
  <button class="w3-button w3-block w3-green w3-section w3-padding" type="submit">Login</button>
  <input class="w3-check w3-margin-top" type="checkbox" checked="checked"> Ricordami
</div>
</form>
<div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
<button onclick="document.getElementById('box').style.display='none'" type="button" class="w3-button w3-red">Cancel</button>
<span class="w3-right w3-padding w3-hide-small"><a href="#">Password dimenticata?</a></span>
</div>
</div>
</div>

Producendo infine il nostro pulsante trigger, in maniera identica agli esempi precedenti, potremo azionare il nostro form modale.

Animazioni per i modali

Fino a questo momento abbiamo prodotto finestre modali che appaiono in maniera lineare all'interno della nostra pagina HTML, senza avere dunque una particolare animazione di entrata. Ma come sappiamo, il framework w3.css ci mette a disposizione una collezione di classi dedicate alla produzione di animazioni attraverso il CSS puro (senza avvalersi di Javascript). Possiamo dunque combinare le due caratteristiche per produrre finestre modali che entrano nella pagina con un particolare tipo di effetto.

Compiere questa operazione è davvero molto semplice: basta aggiungere una delle classi per la produzione di animazioni all'elemento con classe w3-modal (contenuto del modale) ed il gioco è fatto. Abbiamo a disposizione questi effetti:

<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">

Possiamo inoltre applicare un effetto anche all'overlay in entrata, applicando una classe di animazione sul contenitore del modale (w3-modal):

<div class="w3-modal w3-animate-opacity">

Chiusura del modale tramite overlay

Con un pizzico di codice Javascript in più, possiamo aggiungere una funzionalità estremamente utile alla user-experience nell'ambito delle finestre modali: la chiusura di queste ultime non solo tramite il click sull'apposito pulsante, ma anche tramite il click sul contenitore del modale, dunque lo sfondo di overlay che contiene la finestra e la separa dalla pagina.

Per fare questo impostiamo un gestore degli eventi sull'oggetto window, che si occuperà di registrare il click nella propagazione dell'evento. Se il bersaglio del click dell'utente è l'overlay del modale, allora tutta la struttura della finestra modale verrà chiusa:

// elemento modale
var modal = document.getElementById('box');
// gestore dell'evento
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Possiamo ora chiudere le nostre finestre sia tramite pulsante di chiusura, sia tramite click sullo sfondo.

Conclusioni

Come abbiamo potuto vedere, la produzione di effetti avanzati come le finestre modali sono molto semplici attraverso il framework w3.css. Questo framework porta la semplicità dei controlli e delle classi di base all'interno dell'ecosistema dei controlli più complessi, garantendo sempre un ottimo controllo sulla struttura e sull'estetica da parte dello sviluppatore. Le finestre modali sono altamente personalizzabili e realizzabili tramite semplicissimi gestori di eventi Javascript. Un'altra dimostrazione della potenza offerta dalle utlime specifiche front-end del w3c, di cui un framework CSS è portatore.