Crea una finestra popup utilizzando HTML, CSS e JavaScript

Le finestre popup ben progettate rendono il tuo sito Web più interattivo e moderno. Possono creare mercati e incrementare le vendite per le imprese.

Puoi creare finestre popup con HTML, CSS e JavaScript. Usa la seguente guida per creare e modellare una finestra popup da zero. Rende il tuo sito Web interattivo e crea fantastiche esperienze utente.

Scrivi HTML per strutturare il contenuto

Scriviamo un codice HTML che ha una finestra modale nascosta che si apre quando si fa clic su un pulsante. In questo caso, visualizzerai il significato della parola Ciao! La finestra popup avrà un'intestazione e alcuni contenuti.

Immediatamente si attiva la finestra modale, viene proiettato un effetto sfocato sullo sfondo. Aggiungi classi alle sezioni che utilizzerai per selezionare il modale in seguito in JavaScript.

<corpo>
<pulsanteclasse="open-modale">Ciao!pulsante





instagram viewer
>
<divclasse="contenuto modale nascosto-modale">
<divclasse="intestazione modale">
<h3>Significato di Ciao!h3>
<pulsanteclasse="chiuso-modale">×pulsante>
div>
<divclasse="corpo modale">
<P>Ciao è un saluto in lingua inglese. È usato a
 l'inizio di una frase come introduzione sia di persona che
 al telefono.P>
div>
div>
<divclasse="sfocatura-bg nascosta-sfocatura">div>
<copionesrc="script.js">copione>
corpo>

La pagina dovrebbe apparire così:

Puoi anche voler indagare sul Elemento di dialogo HTML se stai cercando di utilizzare il markup più semantico.

Scrivi CSS per aggiungere stile

Usa i CSS per formattare la finestra popup. Posiziona la finestra al centro della pagina web su uno sfondo nero, in modo che sia chiaramente visibile. Darai anche uno stile alla finestra, al suo sfondo e alla dimensione del carattere.

Innanzitutto, crea uno stile uniforme per l'intera pagina impostando il margine, il riempimento e l'altezza della riga. Quindi allinea gli elementi del corpo al centro su uno sfondo posteriore.

* {
margine: 0;
imbottitura: 0;
dimensionamento della scatola: scatola di confine;
altezza della linea: 1;
}
corpo {
altezza: 100%;
Schermo: flettere;
giustificare il contenuto: centro;
direzione flessibile: colonna;
align-elementi: centro;
sfondo: #000;
spacco: 30px;
}

Quindi, modella il open-modale pulsante. Dagli un colore di sfondo diverso dal resto della pagina in modo che risalti. Inoltre, imposta il colore del carattere, la dimensione, il riempimento e un tempo di transizione.

.open-modale {
sfondo: #20c997;
colore: #F F F;
confine: nessuno;
imbottitura: 20px 40px;
dimensione del font: 48px;
bordo-raggio: 100px;
cursore: puntatore;
transizione: Tutto 0.3s;
contorno: nessuno;
}
.open-modale:attivo {
trasformare: tradurreY(-17px);
}

Quindi, definisci lo stile del contenuto modale che verrà visualizzato all'apertura della finestra. Imposta uno sfondo bianco, assegnagli una larghezza inferiore rispetto al corpo e aggiungi un'imbottitura.

Dagli anche uno z-index, in modo che appaia davanti a open-modale pulsante. Inoltre, impostare il nascosto-modale visualizzato come nessuno, quindi rimane nascosto fino a quando non lo attivi.

.modal-content {
sfondo: #ccc;
larghezza: 500px;
imbottitura: 20px;
bordo-raggio: 10px;
indice z: 99;
}
.modal-header {
Schermo: flettere;
giustificare il contenuto: spazio-tra;
margine inferiore: 16px;
colore: #000;
dimensione del font: 30px;
}
.modal-corpoP { 
dimensione del font: 22px;
altezza della linea: 1.5; 
} 
.hidden-modal { 
Schermo: nessuno; 
}

Quindi modellare il modale chiuso pulsante con uno sfondo trasparente e allinearlo al centro.

.chiuso-modale {
sfondo: trasparente;
confine: nessuno;
Schermo: flettere;
align-elementi: centro;
giustificare il contenuto: centro;
altezza: 20px;
larghezza: 20px;
dimensione del font: 40px;
}
.chiuso-modale: al passaggio del mouse {
colore: #fa5252;
}

Infine, modella l'elemento di sfocatura che verrà proiettato sullo sfondo quando si apre la finestra. Avrà altezza e larghezza massime e un filtro di sfondo. Imposta la sfocatura come nessuna, quindi non è visibile finché non si apre la finestra.

.sfocatura-bg {
posizione: assoluto;
superiore: 0;
Sinistra: 0;
altezza: 100%;
larghezza: 100%;
sfondo: rgb(0, 0, 0, 0.3);
filtro sullo sfondo: sfocatura(5px);
}
.sfocatura nascosta {
Schermo: nessuno;
}

Dopo aver aggiunto il CSS, la pagina dovrebbe apparire così:

Controlla il popup con il codice JavaScript

Utilizzerai JavaScript per aprire e chiudere la finestra modale mostrandola o nascondendola. Aggiungere ascoltatori di eventi al pulsante per attivarne l'apertura e la chiusura quando si fa clic su di esso.

Per prima cosa seleziona gli elementi pertinenti utilizzando le classi CSS che hai definito nell'HTML:

permettere contenuto modale = documento.querySelector(".modal-content");
permettere openModale = documento.querySelector(".open-modal");
permettere closeModal = documento.querySelector(".close-modal");
permettere sfocaturaBg = documento.querySelector(".sfocatura-bg");

Aggiungi un listener di eventi al file open-modale pulsante in modo che apra la finestra quando si fa clic su di esso.

openModal.addEventListener("clic", funzione () {
 modalContent.classList.remove("nascosto-modale");
 blurBg.classList.remove("sfocatura nascosta");
});

Esegui le azioni opposte per gestire la chiusura del popup ma, questa volta, avvolgile in una funzione denominata. Questo gestirà il comportamento per più eventi che potrebbero causare la chiusura della finestra modale:

permettere closeModalFunction = funzione () {
 modalContent.classList.add("nascosto-modale")
 blurBg.classList.add("sfocatura nascosta")
}

Aggiungi listener di eventi per gestire i clic sullo sfondo o il pulsante di chiusura e il caso in cui l'utente preme il tasto Esc.

blurBg.addEventListener("clic", closeModalFunction);
closeModal.addEventListener("clic", closeModalFunction);
documento.addEventListener("tasto abbassato", funzione (evento) {
Se (evento.key "Fuga"
 && !modalContent.classList.contains("nascosto")
 ) {
 closeModalFunction();
 }
});

Ora, quando fai clic sul file Ciao! pulsante, viene visualizzato il modale. Puoi chiuderlo facendo clic sul pulsante Annulla a destra della finestra. Vedi il codice su codepen.io e interagire con il modale:

Usi di finestre popup

L'uso principale delle finestre popup/modali nello sviluppo web è quello di focalizzare l'attenzione su un particolare elemento del sito web. Una volta attivato, disattiva il resto della pagina invitando l'utente a prestarvi attenzione.

Le finestre popup animano la tua interfaccia utente. Possono avvisare e attirare l'attenzione su informazioni importanti sulla pagina Web per i tuoi utenti. Per rimuovere la finestra, l'utente deve eseguire un qualche tipo di azione. In questo modo l'utente può interagire con la finestra e ottenere le informazioni desiderate.