Ciao a tutti e benvenuti in questa guida HTML e JavaScript su come creare un popup completo e funzionante. Nel web design, un popup è un elemento che compare in anteprima sulla schermata del visitatore. I popup vengono spesso utilizzati per mostrare qualche tipo di annuncio o pubblicità al visitatore di un sito.
Se non siete interessati al metodo e volete semplicemente fare un copia incolla del mio popup potete trovare il codice in questa repository su GitHub.
In questo tutorial vedremo come fare le seguenti cose:
- Creare il codice HTML e CSS necessario per il popup
- Fare apparire un popup dopo n secondi dalla visita di un cliente con JavaScript
- Chiudere il popup su click di un tasto o sfondo usando JavaScript
Come creare un popup con il codice HTML
Per creare un popup a schermo interno, il metodo più semplice è utilizzare due div: Uno per lo sfondo ed un altro per il popup.
Come potete vedere dal codice HTML abbiamo inserito due div: .overlay, ed al suo interno .popup
Se date un’occhiata alla tab CSS in alto, potete vedere che al div “overlay” viene data una posizione fixed in modo da coprire l’intera schermata del visitatore. inoltre viene imposta una regola CSS chiamata display, per controllare la visibilità del div. Per ora ho utilizzato display block, per mostrarvi l’aspetto del popup, ma in seguito andremo a nascondere il div, per poi mostrarlo con JavaScript.
Date un’occhiata al resto del codice HTML e CSS per rendervi un’idea di come funzioni. Se avete qualche domanda su questo potete commentare nella zona in basso.
Come mostrare un popup con JavaScript
Prima di passare al codice JS, andiamo a cambiare la proprietà display del div .overlay per renderlo invisibile inizialmente.
Possiamo fare ciò cambiando la linea:
style.css
.overlay{…display: none;… }
Ora se carichiamo la pagina HTML vedremo che il popup è sparito.
Dopo aver collegato un file JS al file HTML, possiamo inserire questo codice al suo interno per fare apparire il div overaly dopo 2 secondi dal caricamento della pagina.
app.js
// mostra il popup dopo 2000 millisecondi (2secondi)
setTimeout(
function() {
console.log("run");
document.getElementById('pop').style.display="block" ;
}, 2000);
Come vedete questo codice prende l’elemento overlay con id=’pop’ e cambia la sua regola CSS display in block.
Come chiudere un popup con JavaScript
Ora abbiamo bisogno di chiudere il popup. Per fare questo, basta creare degli eventi su determinati oggetti HTML ed eseguire un codice JS per nascondere di nuovo il div overlay.
In particolare vogliamo eseguire il codice JS su questi eventi: Click dell’icona close e click sullo sfondo nero.
Per creare questi eventi utilizziamo il codice JS:
// chiudi il pupup quando clicchi sulla X document.getElementById("close").onclick = function(e){document.getElementById('pop').style.display="none"; } // chiudi il popup quando clicchi sullo sfondo nero document.getElementById("pop").onclick = function(e){document.getElementById('pop').style.display="none"; }
Se mettiamo tutto il codice insieme posiamo ottenere un risultato del genere:
Ci siamo ora siete in grado di:
Creare un popup con il codice HTML e CSS
Aprire un popup con il codice JS
Chiudere un popup con il codice JS
