Recentemente, ho fatto il salto dalla creazione di applicazioni fullstack Ruby a lavorare con Javascript. Come forse già saprai, Javascript consente agli utenti o ai client di interagire con una pagina Web e di rendere dinamicamente nuovi contenuti al DOM in base all’interattività dell’utente. Rispetto alla codifica in Ruby on Rails (in cui ogni rerender richiede un aggiornamento a pagina intera), la possibilità di rerender vari elementi della pagina in base alle interazioni dell’utente con Javascript ha portato le mie capacità di sviluppo frontend dal 1994 e nel presente. Con la mia comprensione rudimentale di Javascript, ora posso creare un elemento web interattivo che non vedevo l’ora di implementare nei miei progetti: finestre di messaggio o popup.

Un modale, o finestra di dialogo, è una finestra di messaggio che appare nel browser dopo qualche interattività utente specificato. Prima di immergerci nelle specifiche della creazione di una scatola modale per il tuo sito con HTML, CSS e Javascript, esaminiamo prima i vari tipi di finestre di messaggio che potresti incontrare.

Avvisi

Un avviso è una finestra di messaggio, in genere bloccata all’interno del browser, che richiede una risposta o un’interazione dell’utente prima che possa essere respinta e scompare dalla pagina. Forse vuoi che il cliente riconosca le informazioni (Termini di utilizzo) o che la pagina stessa confermi il completamento di un modulo. Tuttavia, fino a quando l’avviso non viene respinto, il client non può interagire con il resto della pagina.

Popup

Un popup è un appiccicoso (si pensi a “si attacca” alla pagina, non appiccicoso come la candy) messaggio di dialogo che viene visualizzata nel browser che non richiedono l’immediata interazione o di attenzione. Se un utente vuole che scompaiano, dovrà chiudere o interagire con il popup in quel momento, ma l’interattività del resto della pagina è ancora funzionale. Le notifiche sono un esempio di un popup.

Growl Notification/Flash Notice

A growl notification is a popup that dismisses itself after an associated period of time. These are sometimes also referred to as flash notices. L’utente può interagire con la notifica growl — forse per chiudere la finestra di messaggio in anticipo, o per fare clic su un pulsante all’interno della notifica — o può scegliere di ignorare e scomparirà dopo la scadenza del timer. Come un popup, la notifica growl consente al client di continuare a interagire con il resto della pagina. Un esempio di questo è una notifica e-mail o social media.

Lightbox/Teatro

Una lightbox oppure un teatro è una finestra di messaggio che di solito si allarga il contenuto che era già disponibile nel browser di un utente di concentrarsi su di esso. Un caso d’uso comune è un’immagine o una serie di immagini visualizzate in una galleria. Quando un lightbox o un teatro viene utilizzato con più parti di contenuto, viene considerato “bloccato” quando un utente può navigare attraverso il contenuto associato all’interno del lightbox stesso, invece di tornare alla pagina originale e successivamente fare clic sull’immagine successiva della serie per ingrandirla.

Popover/Hovercard

Una delle piccole finestre di messaggio, un popover o un hovercard solo sullo schermo viene visualizzato quando un utente passa il mouse su un’area selezionata. Queste finestre di messaggio possono contenere istruzioni o spiegazioni relative al pulsante o al contenitore su cui l’utente sta attualmente passando il mouse; possono anche contenere un’anteprima delle informazioni disponibili se l’utente fa clic su un collegamento.

Modal/finestra di Dialogo

Infine, modale o la finestra di dialogo è una finestra di messaggio che permette una ulteriore interattività della pagina, senza che abbandonano il contenuto corrente del browser. Una casella modale non è bloccata sullo schermo (ad es., il cliente può navigare lontano da esso senza un’interazione richiesta), sebbene sia tipicamente il fuoco dell’utente (basato sul Suo stile della scatola). Nella maggior parte dei casi, se un utente desidera ignorare la modale, può semplicemente chiudere la casella con un pulsante fornito o fare clic al di fuori della modale. Un esempio di modale è quando un utente deve compilare un modulo o fornire informazioni specifiche per una query di ricerca, ma non si desidera che navighi in un’altra pagina.

Implementazione di un Modale

al fine di creare e implementare un modale sulla tua pagina, ci sono tre passi che dovrete completare per funzionalità:

1. HTML: codice per creare un elemento modale
2. CSS: styling per determinare come il modale sembra e appare sulla pagina
3. Javascript: posizionando gli ascoltatori di eventi in modo che il modale appaia/scompare a seconda dell’interattività dell’utente

HTML

Per il più semplice dei modali, abbiamo bisogno di un pulsante (o qualsiasi elemento di pagina tu preferisca) su cui un utente può fare clic per attivare il modale, il modale effettivo, e probabilmente vorrai implementare un pulsante

<button> click me, I make a modal</button><div class="modal">
<div class="modal-content">
<span class="close-btn">&times;</span>
<p>this is the text inside the modal</p>
</div>
</div>

In precedenza, si può vedere che abbiamo un pulsante che apparirà all’interno del nostro HTML, così come modale, con tre classi CSS: modalmodal-btn e close-btn. Ognuno di questi sarà incluso nel CSS qui sotto. Il primo div è il contenitore padre che contiene l’intera modale con una classe di modal. Internamente, abbiamo un div che contiene il contenuto per il modale stesso: il pulsante per chiudere il modale nel tagspan e il testo all’interno di un tagp.

A parte, puoi anche implementare intestazioni e piè di pagina nella tua modale semplicemente creando più div all’interno delle classi HTML e ulteriori CSS per scopi di styling. Biru:

<div class="modal">
<div class="modal-header">
<span class="close-btn">&times;</span>
<h1>I am the Header</h1>
</div>
<div class="modal-content">
<p>this is the text inside the modal</p>
</div>
<div class="modal-footer">
<h2>I am the Footer</h2>
</div>
</div>

CSS

Per modellare ciascuno degli elementi nel nostro HTML modale semplice, dobbiamo creare le classi CSS associate: .modal.modal-content, e .close-btn. Inoltre, puoi vedere sotto che c’è anche CSS incluso per creare animazioni per il modale.

.modal {
display: none;
position: fixed; 
padding-top: 50px;
left: 0; 
top: 0;
width: 100%;
height: 100%; 
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}.modal-content {
position: relative; 
background-color: white;
padding: 20px; 
margin: auto; 
width: 75%; 
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}.close-btn {
float: right; 
color: lightgray; 
font-size: 24px; 
font-weight: bold;
}.close-btn:hover {
color: darkgray;
}@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

Nelle classi precedenti, abbiamo uno stile per ciascuno degli elementi che abbiamo creato nel nostro HTML.

La classe.modal ha attributi che determinano come tratta la pagina dietro la modale stessa: una larghezza e un’altezza rispetto alla pagina dietro la finestra di dialogo, un colore (questo esempio utilizza un grigio semi-opaco) e un’impostazione di visibilità in modo che possiamo attivarla nel nostro Javascript quando un utente fa clic sul pulsante.

Per la finestra di dialogo effettiva, abbiamo anche uno stile separato in .modal-content: posizionandolo sullo stile di sfondo, un colore di sfondo per la finestra di dialogo stessa, padding, e in questo esempio è inclusa l’animazione in modo che la modale scenda dalla parte superiore della pagina.

Inoltre, abbiamo disegnato una classe.close-btn che galleggia una ‘x’ a destra, e con.close-btn:hover, quando l’utente passa sopra il pulsante di chiusura, il colore cambierà. Per chiarezza, l’utente può fare clic al di fuori della modale per chiudere la finestra di dialogo come fare clic sul pulsante Chiudi. Creeremo un listener di eventi per entrambe le opzioni nel nostro Javascript.

Questo graffia a malapena la superficie del CSS che potresti implementare da solo. Sentitevi liberi di regolare il codice di cui sopra per soddisfare al meglio le proprie esigenze.

Javascript

Infine, abbiamo bisogno di scrivere un po ‘ di Javascript per creare la funzionalità del modale.

let modalBtn = document.getElementById("modal-btn")let modal = document.querySelector(".modal")let closeBtn = document.querySelector(".close-btn")modalBtn.onclick = function(){
modal.style.display = "block"
}closeBtn.onclick = function(){
modal.style.display = "none"
}window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}

Abbiamo selezionato diversi oggetti dal nostro HTML e li abbiamo assegnati alle variabili: amodal-btn, ilmodalstesso, e ilclose-btn. Quindi, abbiamo creato ascoltatori di eventi peronclick eventi. Quando un utente fa clic su modal-btn, lo stile di visualizzazione è impostato su "block”, ma quando si fa clic su close-btn o la finestra al di fuori di modale (rappresentato nel nostro stile semi-opaco grigio), lo stile di visualizzazione e successivamente viene impostato su "none". Questo nasconde efficacemente la modale finché non fanno nuovamente clic su modal-btn.

nel complesso, giocando con il DOM con Javascript è stato incredibilmente divertente e gratificante come un inizio coder. Speriamo che il codice sopra ti aiuti a implementare modali e finestre di messaggio anche da solo. Con un po ‘ di Googling veloce, puoi anche trovare ulteriori risorse per regolare modali e finestre di dialogo per i tuoi casi d’uso.

Buona fortuna là fuori, e felice di codifica!