Come usare jQuery per generare un pop-up modale quando si clicca

Come usare jQuery per generare un pop-up modale quando si clicca

Un box modale è una finestra pop-up che costringe l’utente a interagire con essa prima di tornare al sito. I box modali sono utili per avvisi, box informativi e altro. È possibile creare un box modale con jQuery. Se non hai familiarità con jQuery, controlla il nostro articolo jQuery Basics per una spiegazione di come funziona jQuery.

Questa è una visualizzazione interattiva del codice che ti mostra l’HTML, il CSS, jQuery e una demo dell’output.

Modal HTML

Per creare un pop-up modale, devi prima stabilire la struttura HTML.

È necessario creare classi per la sovrapposizione del pop-up e il contenuto del pop-up in modo da poterli modificare separatamente dal resto del documento.

Questo esempio crea le classi “popup-overlay” e “popup-content” per permettere ai CSS di dare uno stile specifico.

Fate attenzione agli elementi dei pulsanti in questo esempio. Abbiamo aggiunto i pulsanti che vogliamo attivare il pop-up. A un pulsante è stata data la classe “open”, mentre l’altro ha la classe “close”. Questi saranno usati più tardi per aprire e chiudere il pop-up.

CSS modale

Nel CSS, dovete stilizzare le classi “popup-overlay” e “popup-content” in modo che siano inizialmente nascoste. Un pop-up non sarebbe un pop-up se fosse visibile fin dall’inizio. Possiamo nascondere il pop-up cambiando la visibilità delle classi:

.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}

Ora, non vogliamo che il pop-up sia nascosto per sempre, quindi abbiamo bisogno di fare un caso d’uso speciale nel CSS per quando il pop-up dovrebbe essere mostrato. Useremo jQuery per aiutare a determinare quando il pop-up dovrebbe essere visibile.

jQuery ha la capacità di aggiungere e rimuovere classi basate su azioni (come il click). Quindi, se programmiamo la jQuery per aggiungere una classe chiamata “active” quando il pulsante “open” viene cliccato, possiamo usare la classe “active” nel CSS per mostrare il pop-up. Aggiungi la classe “active” alle classi del pop-up e crea un nuovo stile per quando il pop-up è visibile.

Vedi l’esempio qui sotto per vedere come dovrebbe apparire questo stile CSS:

.popup-overlay.active{visibility:visible;}.popup-content.active {visibility:visible;}

Modal jQuery

Ora è il momento di aggiungere la jQuery. Assicurati di impostare il tuo documento HTML per jQuery prima di aggiungere qualsiasi codice jQuery. Se non sei sicuro di come farlo, vedi il nostro articolo Getting Your HTML Ready for jQuery.

Quindi quando i pulsanti HTML “Open” e “Close” vengono cliccati, jQuery ha bisogno di aggiungere o rimuovere la classe “active”.

Questa prima dichiarazione aggiunge la classe “active” quando il pulsante “Open” viene cliccato.

$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});

Quando questo accade, la classe “active” viene aggiunta alle classi del pop-up, cambiando così la visibilità del pop-up in “visible”. In altre parole, il pop-up apparirà.

Questa seconda dichiarazione rimuove la classe “active” quando il pulsante “Close” viene cliccato.

$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});

Quando questo accade, la classe “active” viene rimossa dalle classi pop-up, facendole tornare al loro stile precedente che ha la visibilità impostata su hidden.

Aggiungi entrambe le dichiarazioni di jQuery al tuo documento. Se tutto questo è stato completato correttamente, avrete un rudimentale box pop-up modale.