Come fare un pop-up
Hai avviato un tuo sito web di recente e vorresti attivare un messaggio a comparsa per i tuoi visitatori? Magari perché hai un'offerta da proporre o semplicemente perché vuoi comunicare una novità importante? Però c'è un problema: sei alle prime armi e non hai idea di come fare. Dico Bene?
Ho una fantastica notizia per te, perché se vuoi imparare come fare un pop-up hai scelto la guida giusta per centrare il tuo obiettivo. In questo tutorial andrò a spiegarti in maniera semplice come fare un pop-up usando HTML, ma anche come bloccare o sbloccare le finestre a comparsa su tutti i dispositivi. Come? Non sai di cosa sto parlando? Te lo illustrerò nel modo più elementare possibile, pertanto non avere timore se non sei un programmatore.
Come per ogni cosa ci vuole un po' di pazienza, quindi la mia unica richiesta è di metterti comodo e di leggere con attenzione i prossimi paragrafi. Sono certo che alla fine del tutorial saprai padroneggaiare al meglio l'integrazione di un pop-up all'interno di un sito web.
Indice
Come fare un pop-up su HTML
Permettimi di accennare brevemente al linguaggio HTML, dicendoti che ciò che stai leggendo ora proviene proprio da una fonte in HTML. Acronimo di Hyper Text Markup Language;, questo linguaggio è detto di "marcatura" e non rienrta tra i linguaggi di programmazione come molti pensano. Per funzionare correttamente, HTML necessita di racchiudere gli elementi tra due tag definite attraverso le parentesi angolari (< >).
Vado a riassumerti brevemente: l'HTML è un linguaggio che viene usato per classificare e posizionare gli elementi (link, testo, video, immagine) all'interno di una pagina, fornendo una struttura vitale per ogni sito web o applicazione. Il codice viene interpretato da un software (es. il browser) e viene reso in forma visiva per l'utente.
È doveroso per me informarti che l'HTML da solo non basta a definire lo stile per creare una finestra pop-up. Per questo è necessario chiedere l'ausilio al linguaggio JavaScript e al CSS o, per l'appunto, foglio di stile. Non voglio dilungarmi oltre, quindi ti invito a dare un'occhiata a questo tutorial su come creare un sito web in HTML, qui ti spiego per filo e per segno come i diversi tipi di linguaggi interagiscono tra loro.
Passiamo all'azione! Apri l'editor di testo disponibile sul tuo sistema operativo, per intenderci il Blocco Note di Windows, o Text Edit per Mac. Altrimenti puoi testare il codice con appositi software come Virtual Studio Code.
Ora copia questo codice e incollalo sul tuo editor di testo. Tranquillo, dopo ti spiegherò la sua struttura.
<!DOCTYPE html>
<html lang="it">
<head>
<title>Come fare un pop-up</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Come fare un pop-up seguendo i tutorial di aranzulla.it</h1>
<div class="overlay" id="pop">
<div class="popup">
<h2>Wow! Ho creato un popup</h2>
<p>Non credevo fosse così facile</p>
<span id="close">X</span>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Non devi fare altro che creare una cartella sul tuo computer e salvare il file assicurandoti di assegnargli un'estensione .html (es. Mio-pop-up.html) al suo interno. In questo modo potrai testare il tuo codice sul browser semplicemente facendo doppio clic sul file. Niente di particolare, non è vero? In realtà hai scritto la tua prima parte di codice per poter capire come fare una pop-up su HTML.
Nella prima riga di codice abbiamo dichiarato il tipo di documento tramite la tag <!DOCTYPE html>, in quella successiva è stata invece aperta la tag <html> e questo è il primo passaggio fondamentale: tale tag racchiude tutto quello che viene definito nel codice della tua pagina.
Il tag <head> è un altro elemento di base di ogni struttura html e ti sarà fondamentale per definire molti parametri, nel nostro caso abbiamo definito il titolo tramite la tag <title>. Come puoi notare la tag di un elemento si chiude sempre inserendo lo Slash (/) dopo la prima parentesi angolare, questo è obbligatorio per poter restituire il valore al browser e permettergli di "tradurlo".
Ora ti starai sicuramente chiedendo cosa significhi la quinta riga <link rel=”stylesheet” type=”text/css” href=”style.css”>. Questo comando richiama il foglio CSS che andremo a creare dopo per personalizzare il tuo pop-up. Mettiamolo da parte per ora e chiudiamo la tag </head>.
La sezione <body> è quella che racchiude il contenuto all'interno del corpo della tua pagina, sia essa un pop-up o un modulo. Serve solitamente a definire quello che effettivamente l'utente visualizzerà sulla schermata. Con H1 assegna un titolo, dopodiché inserisci due tag <div> che ti serviranno per organizzare il layout del tuo pop-up. La prima div (division) indica l'overlay, al quale assegniamo l'id pop, mentre la seconda va a richiamare la finestra pop-up.
Al di sotto puoi trovare un sottotitolo in H2 seguito da un piccolo paragrafo, indicato con la tag <p>. Subito sotto noterai una tag <span>, ovvero una marcatura che richiama un elemento in line. A differenza della <div>, che suddivide lo spazio in blocchi, l'etichetta <span> può definire solo elementi in linea. In questo caso abbiamo semplicemente definito il pulsante di chiusura del pop-up, identificandolo con una X.
Una volta chiuse le due <div> che abbiamo creato in precedenza, inseriamo la tag <script> che ci servirà a richiamare l'elemento JavaScript. Nel nostro caso, tramite <src>, stiamo richiamando un apposito file. Ti spiegherò più avanti la sua utilità e come integrarlo.
Come vedi abbiamo in realtà utilizzato tre linguaggi differenti per creare l'ossatura del pop-up. Il primo, HTML, ci ha consentito di strutturare ciò di cui abbiamo bisogno, ma ora dobbiamo necessariamente ricorrere ad altri due codici: un foglio di stile e un file Javascript. In questo capitolo quindi cosa abbiamo fatto? Abbiamo creato la pagina di base, definito che useremo un overlay, definito che useremo una finestra pop-up e dichiarato i collegamenti ai file CSS e Javascript. Tutto chiaro fin qui? Sono sicuro di sì.
CSS del pop-up
Hai presente la tag <link rel> che abbiamo inserito all'interno dell'<head> del nostro foglio html? Devi sapere che questa stringa serve a richiamare il foglio di stile, ovvero quel documento che contiene tutte le informazioni dal punto di vista grafico e stilistico della nostra creatura.
In questa riga infatti, abbiamo detto al browser (o chi per lui) di fare riferimento a un file chiamato style.css, pertanto copia il codice che ti metto qui sotto su un nuovo file di testo e salvalo con la stessa estensione. Assicurati di salvarlo nella stessa cartella che contiene il doc .html.
body{
background: #add2ee;
color: #fff;
text-align: center;
}
.popup{
width: 250px;
height: 200px;
background: linear-gradient(rgb(255, 255, 255), rgb(0, 0, 255));
border-radius: 20%;
margin: 40px auto;
padding: 20px 20px;
position: relative;
color: #b11414;
}
.overlay{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
background: rgba(41, 178, 14, 0.7);
text-align: center;
display: none;
}
#close{
position: absolute;
top: -20px;
right: -20px;
color: #002aff;
}
#close:hover{
cursor: pointer;
}
Dando un'occhiata a questo codice puoi facilmente intuire come ogni sezione sia relativa alla struttura HTML definita sopra. Nella fattispecie .popup e .overlay sono agganciate alle due <div class> che abbiamo definito all'interno del <body> html. Qui puoi definire le caratteristiche del tuo pop-up modificando i parametri già presenti. La stringa “close{” fa riferimento al pulsante di chiusura che abbiamo impostato tramite la tag <span id>, mentre il close:hover indica che passando col mouse sopra la X, il cursore si tramuterà nel classico puntatore a forma di mano.
Come vedi tutto comincia ad avere un senso, vero? Tramite il CSS puoi sbizzarrirti aggiungendo ulteriori parametri, ma per cominciare questo codice può sicuramente bastare. Ho capito bene? Ti stai chiedendo come fare un pop-up che si attivi in un determinato momento? Ma certo! Te lo spiego nel capitolo successivo.
JavaScript del pop-up
Ogni pop-up che si rispetti ha bisogno di un trigger, ovvero di un input che gli indichi quando apparire. Ci sono tanti tipi di finestre a comparsa e uno tra i tanti esempi è l'exit intent pop-up, ovvero un finestra che riceve il trigger una volta che ci si avvicina con il mouse alla chiusura di una pagina web. Nel nostro caso però ti mostrerò come far apparire il pop-up dopo 1 secondo (1000 millisecondi) dall'apertura della pagina web da parte del visitatore.
Per fare in modo che questo accada, viene in nostro soccorso il linguaggio JavaScript, perché esso è in grado di definire praticamente ogni tipo di interazione. Pertanto è uno dei lignuaggi più utilizzati per la creazione di pagine dinamiche, proprio come il pop-up che stiamo creando. Incolla il seguente codice in un file di testo che nominerai app.js (abbiamo definito questo nome nella tag <script> del codice html) e salvalo nella cartella contenente i file .html e .css.
// attiva il popup dopo 1000 ms
setTimeout(
function() {
console.log("run");
document.getElementById('pop').style.display="block" ;
}, 1000);
// chiudi il pupup al clic su X
document.getElementById("close").onclick = function(e){
document.getElementById('pop').style.display="none";
}
// chiudi il popup cliccando sull'overlay
document.getElementById("pop").onclick = function(e){
document.getElementById('pop').style.display="none";
}
Grazie a questa parte di codice in JavaScript abbiamo assegnato un timeout di 1 secondo per l'apertura del pop-up, richiamando l'“id pop” (inserito sempre nella <div> del codice HTML). Nelle due funzioni successive abbiamo definito cosa deve accadere al clic sulla X e abilitato la chiusura del pop-up cliccando all'esterno di esso.
Puoi testare il file JavaScipt del pop-up facendo doppio clic sul file .html creato in precedenza che, come detto, sta alla base di tutto. Chiaramente potrai definire molto meglio il pop-up secondo le tue esigenze, qui mi sono limitato a farti un esempio molto basilare. Tuttavia se la programmazione è la tua aspirazione ti invito a leggere la mia guida sull’argomento.
Come fare per bloccare pop-up
Devi sapere che alcuni siti web fanno un uso spropositato di finestra a comparsa, quindi potrebbe esserti utile sapere come fare per bloccare pop-up. Questo può essere fatto su ogni tipo di browser e anche su dispositivi Android e iOS/iPadOS, tuttavia trovo più utile rimandarti al mio tutorial dedicato.
Come fare a sbloccare pop-up
Al contrario di quanto detto sopra, talvolta le finestre a comparsa sono usate anche da siti web meno invasivi. Per esempio può capitare che eseguendo il login a un portale tramite Gmail, il browser abbia bisogno di aprire un'ulteriore finestra. Ecco che come fare a sbloccare pop-up in questo caso può fare al caso tuo, soprattutto se stai navigando su siti che ben conosci e di cui puoi fidarti ciecamente.
A tal proposito ho scritto un esaustivo e interessante tutorial che puoi metter in pratica su Windows, macOS e sui sistemi mobile Android e iOS/iPadOS.
Autore
Salvatore Aranzulla
Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e cura la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.
