Creare delle finestre modali è molto utile per catturare l’attenzione di un visitatore. Molti usano jQuery per raggiungere questo scopo e dal mio punto di vista non ci vedo niente di male, ma se osserviamo questo trend con un occhio di riguardo nei confronti delle prestazioni si rischia soltanto di appesantire (inutilmente) il proprio sito!
Diciamoci la verità, le finestre modali sono utili per mostrare informazioni o chiedere azioni da parte dell’utente come, per esempio, l’inserimento della propria email per iscriversi ad una newsletter, proprio come succede anche in questo sito. Questi elementi aiutano a raggiungere una miglior interazione con i visitatori del nostro sito e sono incredibilmente utili.
Tornando sull’argomento della pesantezza delle proprie pagine questo è un fattore che sta diventando sempre più importante perché, come ormai dovresti sapere, i vari motori di ricerca hanno iniziato ad analizzare questo fattore e ne tengono di conto per il posizionamento delle nostre pagine nelle SERP; in fin dei conti un sito veloce è un sito che si legge volentieri!

In questo articolo non ti spiegherò come creare delle bellissime finestre modali ma piuttosto, grazie al codice di Daniele, ti mostrerò come sia possibile creare delle leggerissime finestre modali create in puro codice JavaScript.
La personalizzazione e la generazione di questa finestra è delegata al linguaggio JavaScript, in questo modo se il browser non è in grado di leggere questo linguaggio (cosa veramente rara ma possibile anche al giorno d’oggi), non dovrà caricare inutili kb di codice.
Come spesso accade, la creazione di questo codice è nato da una necessità che Daniele ha avuto durante la creazione del plugin WordPress Firefox OS Bookmark, plugin che permette di installare un sito web basato su questa piattaforma proprio come se fosse una vera applicazione per Firefox OS.
Al giorno d’oggi la Mozilla Foundation ha deciso di interrompere lo sviluppo di questo sistema operativo dedicato ai device mobili, ma questo non èun buon motivo per non pubblicare questo articolo.
Ovviamente reinventare la ruota, sopratutto per noi sviluppatori, è un processo che rallenta in maniera incredibile il nostro processo creativo ed è per questo motivo che per la creazione di questa finestra modale siamo partiti da uno codice di esempio già funzionante che però presentava qualche punto a sfavore…
Per prima cosa, sia il codice HTML che il CSS erano stati inseriti in parti esterne al codice JavaScript, cosa che rende il tutto molto più difficile da gestire e come detto precedentemente più pesante da scaricare.
Invece, la versione di Daniele presenta tutto all’interno di una singola classe che potrai personalizzare come meglio credi.
Prima di vedere il codice completo, andiamo ad analizzare passo passo come è stato possibile creare questo file.
Controlli e Configurazioni
Prima di creare il contenitore è necessario creare la classe che ci permetterà di mostrare la nostra finestra modale quindi dobbiamo fare alcuni controlli all’interno della pagina, controlli che ci permettono di caricare il nostro codice soltanto se invocato in modo da tener conto dell’importanza di creare delle pagine leggere veloci da caricare.
(function(name, context, definition) { if (typeof define === 'function' && define.amd) { define(definition); } else if (typeof module !== 'undefined' && module.exports) { module.exports = definition(); } else { context[name] = definition(); } })('Modal', this, function() { var Modal = function(element) { this.target = element; if (!this.isOpen) { this._init(); } };
Grazie a questi codici possiamo controllare se la finestra è stata già aperta e mostrarla. Questo codice è molto standard e troveremo il tempo di approfondirlo attraverso altri articoli.
Creiamo il Contenitore
Adesso che i vari controlli sono stati eseguiti, è giunto il momento di creare il nostro contenitore e inserire le prime personalizzazioni CSS.
Modal.prototype._init = function() { var self = this; this.overlay = document.createElement('div'); this.overlay.className = 'overlay_'; this.overlay.style.position = 'fixed'; this.overlay.style.top = 0; this.overlay.style.right = 0; this.overlay.style.bottom = 0; this.overlay.style.left = 0; this.overlay.style.zIndex = '99999'; this.overlay.style.background = 'rgba(0, 0, 0, .5)'; this.overlay.setAttribute('tabindex', -1);
Con questa prima porzione di codice non facciamo altro che creare il metodo _init
che viene richiamato se la finestra non è stata aperta e andiamo a creare l’elemento <div>
grazie alla funzione JavaScript document.createElement()
che rappresenterà lo sfondo della nostra finestra modale.
A questo vengono aggiunte alcune regole CSS, come la position: fixed
che ci permette di posizionare la nostra finestra al centro della pagina anche se il nostro visitatore scorrerà i suoi contenuti.
Gli altri stili sono abbastanza standard e dovresti capire da solo che cosa fanno, se così non fosse non esitare a chiedere attraverso i commenti oppure inizia a seguire il nostro corso dedicato a JavaScript!
Creiamo la finestra modale
Adesso che siamo stati in grado di applicare uno sfondo semitrasparente, è giunto il momento di creare la vera finestra modale.
this.modalWindow = document.createElement('div'); this.modalWindow.className = 'modal'; this.modalWindow.style.position = 'fixed'; this.modalWindow.style.top = 0; this.modalWindow.style.right = 0; this.modalWindow.style.bottom = 0; this.modalWindow.style.left = 0; this.modalWindow.style.width = '80%'; this.modalWindow.style.height = '30%'; this.modalWindow.style.margin = 'auto'; this.modalWindow.style.background = '#EEE'; this.modalWindow.style.zIndex = '99999'; this.modalWindow.setAttribute('role', 'dialog'); this.modalWindow.setAttribute('tabindex', 0);
Il codice che trovi in questo blocco è molto simile al precedente, in fin dei conti anche una finestra modale è composta da del semplice codice HTML e CSS ?
Le cose interessanti che possiamo notare sono comunque la presenza di una width
e di una height
dichiarati in percentuale, in questo modo le dimensioni della modal si adatteranno alla finestra che la contiene.
Prima di passare ad analizzare come sia possibile creare gli altri contenitori e i bottoni di questa finestra, vorrei farti notare l’interessante attributo role="modal"
che è stato inserito e che comunicherà al nostro browser e ai motori di ricerca la funzione di questa porzione di codice.
Altri contenitori e il bottone di chiusura
Adesso che abbiamo creato i componenti principali è giunto il momento aggiungere quelli che ci permetteranno di personalizzare ulteriormente il contenuto interno.
this.modalWrapper = document.createElement('div'); this.modalWrapper.className = 'modal__wrapper'; this.modalWrapper.style.overflow = 'auto'; this.modalWrapper.style.height = '100%'; this.modalContent = document.createElement('div'); this.modalContent.className = 'modal__content'; this.modalContent.style.padding = '1em'; this.modalContent.style.textAlign = 'center'; this.closeButton = document.createElement('button'); this.closeButton.className = 'modal__close'; this.closeButton.style.left = '10px'; this.closeButton.style.top = '-45px'; this.closeButton.style.position = 'relative'; this.closeButton.innerHTML = 'Close'; this.closeButton.setAttribute('type', 'button'); this.closeButton.onclick = function() { self.close(); };
A parte i due <div>
creati, la cosa più interessante di questo codice è la creazione del bottone di chiusura. Come puoi notare nelle ultime tre righe abbiamo aggiunto il metodo close()
che ci permetterà di chiudere la finestra nel momento in cui il nostro utente cliccherà su questo elemento.
Ti stai chiedendo come è stato dichiarato questo metodo? Niente di più semplice:
Modal.prototype.close = function(callback) { this.target.removeChild(this.modalWindow); this.target.removeChild(this.overlay); this.isOpen = false; if (callback) { callback.call(this); } };
In poche parole, questo codice non fa altro che rimuovere gli elementi che abbiamo aggiunto attraverso il codice JavaScript e imposta la proprietà isOpen
a false
in modo da aggiornare i vari controlli che abbiamo visto precedentemente. Questo metodo supporta anche una funzione di callback in questo modo potrai aggiungere altro codice quando la finestra viene chiusa, soluzione molto utile se desideri trasformare degli elementi nella tua pagina.
Il codice per la creazione del pulsante OK non verrà incluso in questo articolo perché è praticamente lo stesso che abbiamo già visto poco fa, sarà comunque possibile consultarlo all’interno del codice condiviso dal nostro Daniele.
Aggiungiamo gli elementi alla pagina
Al momento in cui ci troviamo non abbiamo fatto altro che creare alcuni elementi, ma la nostra pagina non è ancora al corrente della loro presenza e tantomento della relazione che intercorre tra essi. Quindi, prima di andare ad analizzare il metodo open()
vediamo come dichiarare queste relazioni tra i vari elementi:
this.modalWindow.appendChild(this.modalWrapper); this.modalWrapper.appendChild(this.modalContent); this.modalWindow.appendChild(this.installButton); this.modalWindow.appendChild(this.closeButton);
Come puoi notare non è niente di complicato, in base alle nostre esigenze non facciamo altro che utilizzare il metodo appendChild()
per aggiungere gli elementi che abbiamo creato precedentemente a quelli che si comportano come contenitori; ovvero la modalWindow
e la modalWrapper
.
Apriamo la finestra modale
Modal.prototype.open = function(text_modal, callback) { if (this.isOpen) { return; } this.modalContent.innerHTML = text_modal; this.target.appendChild(this.overlay); this.target.appendChild(this.modalWindow); this.modalWindow.focus(); this.isOpen = true; if (callback) { callback.call(this); } };
Con il codice inserito qua sopra non facciamo altro che creare il metodo open()
che potremo usare all’interno della nostra pagina HTML per richiamare la finestra modale grazie a qualcosa come:
<script> var modal = new Modal(document.body).open('ciao sono una finestra'); </script>
Ovviamente l’esecuzione di questo codice potrebbe essere ritardato grazie alla funzione setTimeout()
, ma restiamo a fare le cose semplici…
Copiando ed incollando questo codice nella pagina HTML la finestra modale verrà mostrata automaticamente una volta caricata la pagina. Da notare che questa funzione richiede un parametro obbligatorio che altro non è che il testo che la finestra stessa dovrà contenere.

Conclusioni
Come si può notare la soluzione proposta da Daniele risulta molto semplice e intelligente dato che questa finestra modale non sarà presente all’interno del codice HTML e allo stesso tempo permette anche di personalizzarla in molti modi differenti. Se vuoi dare un’occhiata al codice completo che permette il suo funzionamento non devi far altro che consultare il Gist che è stato creato per questo articolo.
Se hai qualche problema o desideri approfondire questo argomento non esitare ad aggiungere un commento, abbiamo sempre voglia di fare quattro chiacchiere 😉
le finestre modali sono un altra cosa, questo script è per una finestra di messaggio ma non ci puoi caricare dentro codice html oppure ASP o php…se scriverete una vera finestra modale avrete di sicuro parecchi fans…perchè è richiestissima e ancora non ce n’è una decente che funzioni correttamente.
comunque è un bello script da usare grazie
è una finestra modale perchè ci sono i pulsanti all’interno il classico chiudi ed ok ma ne puoi aggiungere quanti ne vuoi, mentre caricare materiale tramite ajax non è difficile da fare estendendo il codice.