Creare un popup in HTML responsive e animato

In questo tutorial vediamo come creare un popup in HTML animato, responsive e facilmente personalizzabile.

Gli ingredienti principali sono Javascript (jQuery), CSS e ovviamente HTML.

Per prima cosa è necessario creare un pulsante al cui clic associare l’apertura del popup. Qualora aveste già tale elemento potete passare al punto 2.

Crea il pulsante per aprire il popup

[code_snippet y=”2016″ name=”creare-un-popup-in-html” id=”1″]

Bene, ora passiamo alla parte divertente: generare e aprire il nostro popup, servendoci di jQuery.

Creiamo una funzione che chiameremo pop_init() 

Genera il popup

[code_snippet y=”2016″ name=”creare-un-popup-in-html” id=”2″]

Nella funzione iniziamo col definire due variabili: pop_height relativa all’altezza del popup, pop_html contenente il codice HTML necessario per creare fisicamente l’elemento.

Con prepend() inseriamo il contenuto della variabile pop_html appena dopo il tag body.

Utilizziamo animate() per dare un pizzico di movimento e animare l’apertura del popup in altezza (quella definita in pop_height) e con event.stopPropagation(); facciamo in modo che cliccando sopra il popup, quest’ultimo non si chiuda.

Vogliamo però che il popup si chiuda cliccando sullo sfondo oppure sul tasto X chiudi, quindi, al clic su questi elementi richiamiamo la funzione pop_close().

Per completare la funzione, tramite text() inseriamo il contenuto testuale passato come argomento della funzione.

Gestisci la chiusura del popup

[code_snippet y=”2016″ name=”creare-un-popup-in-html” id=”3″]

Ora dobbiamo legare la funzione che genera il popup all’evento del clic sul pulsante APRI POPUP. Ci servirà la classe che abbiamo assegnato al pulsante (vedi punto 1).

Gestisci l’apertura del popup

[code_snippet y=”2016″ name=”creare-un-popup-in-html” id=”4″]

Ci siamo quasi, tutto quello che manca è assegnare gli stili CSS alle classi create finora.

Aggiungi gli stili

[code_snippet y=”2016″ name=”creare-un-popup-in-html” id=”5″]

La classe pop-bg è un overlay scuro di fondo in posizione fissa che occupa tutto lo spazio della finestra del browser e che permette di oscurare leggermente i contenuti della pagina staccandoli dal nostro popup.

La classe pop-wrap è il nostro elemento popup, centrato nella pagina e fisso.

pop-x è il pulsante posizionato nell’angolo in alto a sinistra del popup e che ne consente la chiusura.

Infine pop-content è l’elemento in cui inseriamo il messaggio o comunque il contenuto che vogliamo far visualizzare all’interno del popup.

Conclusione

In 4 semplici passi abbiamo creato un popup responsive e animato. A questo punto possiamo personalizzarlo nel modo che preferiamo modificandone gli stili, l’animazione e il messaggio.

Nel prossimo articolo vedremo come gestire in modo dinamico il contenuto del popup, grazie ad AJAX.