In questo tutorial impareremo come creare maniere pop-up con JavaScript (finestre di dialogo) senza utilizzare un quadro di lavoro come bootstrap o a Biblioteca di terze parti. Creeremo tutto da zero, offrendo un controllo completo su come funziona e come appare.
Ecco lo spettacolo che creeremo:
1. Iniziare con la marcatura della pagina
creerà prima un modale. Per fare ciò, aggiungeremo la classe .modal e un ID univoco a un contenitore. Quindi specificare la finestra di dialogo impostando un elemento .modal-dialog come elemento secondario diretto del .modal. Il dialogo conterrà il contenuto del Modal. Può essere qualsiasi tipo di contenuto come testo, immagini, lightboxes, notifiche / avvisi utente, ecc.
“Una finestra di dialogo (o modale) è un piccolo elemento Interfaccia utente (UI) che appare in primo piano su un sito Web, è solitamente attivato come avviso in modo che l’utente faccia qualcosa “- ADI Purdila
A Apri un Modal, avremo bisogno di qualsiasi articolo con l’attributo data-open (normalmente button). Il valore di questo attributo deve essere l’ID del Modal desiderato.
Per impostazione predefinita, un Modal si chiuderà se facciamo cliccare dai limiti o quando premiamo il tasto Esc Ma possiamo anche chiuderlo se clicciamo su qualsiasi articolo con l’attributo (di solito button
All’inizio, il Modal apparirà / scomparirà con un effetto sbiadito. Ma abbiamo la possibilità di regolare l’effetto di animazione di dialogo utilizzando l’attributo data-animation. il valore di questo attributo che deve essere aggiunto a .modal può essere uno dei seguenti valori:
-
slideInOutDown -
slideInOutTop -
slideInOutLeft -
slideInOutRight -
zoomInOut -
rotateInOutDown -
mixInAnimations
Vedremo più da vicino questi valori in una prossima sezione.
Per ora, ci familiarizzare con la marcatura che è necessaria Per rappresentare un solo modale:
<button type="button" class="open-modal" data-open="modal1">...</button><div class="modal"> <div class="modal-dialog"> <header class="modal-header"> ... <button class="close-modal" aria-label="close modal" data-close>✕</button> </header> <section class="modal-content">...</section> <footer class="modal-footer">...</footer> </div></div>
2. Definisce alcuni stili di base
con il marcato preparato, configueremo alcuni Variabili CSS e riavvieremo gli stili:
:root { --lightgray: #efefef; --blue: steelblue; --white: #fff; --black: rgba(0, 0, 0, 0.8); --bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);}* { padding: 0; margin: 0;}button { cursor: pointer; background: transparent; border: none; outline: none; font-size: inherit;}
Dopo, concentreremo orizzontalmente e contenuto verticale D E la pagina. Inoltre, ti forniremo alcuni stili al pulsante responsabile per l’apertura del Modal:
/*CUSTOM VARIABLES HERE*/body { display: flex; align-items: center; justify-content: center; height: 100vh; font: 16px/1.5 sans-serif;}.btn-group { text-align: center;}.open-modal { font-weight: bold; background: var(--blue); color: var(--white); padding: .75rem 1.75rem; margin-bottom: 1rem; border-radius: 5px;}
A questo punto, concentreremo la nostra attenzione sugli stili di Il Modal.
Ogni modale avrà le seguenti funzioni:
- sarà schermo intero con una posizione fissa. Cioè, sarà visto come una sovrapposizione che copre tutta la larghezza e l’alto della finestra.
- avrà un colore di sfondo scuro.
- sarà nascosto per impostazione predefinita.
- La finestra di dialogo sarà centrata orizzontalmente e verticalmente.
/*CUSTOM VARIABLES HERE*/.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--black); cursor: pointer; visibility: hidden; opacity: 0; transition: all 0.35s ease-in;}
La finestra di dialogo avrà una larghezza massima e altezza. La sua altezza sarà dell’80% dell’altezza della finestra. Nei casi in cui la sua altezza supera tale valore, verrà visualizzata una barra di scorrimento verticale:
/*CUSTOM VARIABLES HERE*/.modal-dialog { position: relative; max-width: 800px; max-height: 80vh; border-radius: 5px; background: var(--white); overflow: auto; cursor: default;}
Infine, definiremo alcuni stili semplici per ciascuna delle sezioni di contenuto :
/*CUSTOM VARIABLES HERE*/.modal-dialog > * { padding: 1rem;}.modal-header,.modal-footer { background: var(--lightgray);}.modal-header { display: flex; align-items: center; justify-content: space-between;}.modal-header .modal-close { font-size: 1.5rem;}.modal p + p { margin-top: 1rem;}
3. Alternando il Modal
Una pagina potrebbe avere più modale . Ma come menzionato sopra, tutte le maniere saranno nascoste all’inizio.
Apre il Modal
Allo stesso modo, una pagina potrebbe avere più di un attivatore aperto (elementi con l’attributo data-open). Ogni volta che si fa clic su un attivatore, il ModAL associato dovrebbe essere reso visibile con un’animazione che appare gradualmente (svanire-in). Ricorda che il valore dell’attributo data-open deve corrispondere all’ID di un Modal.
Ecco lo script che rivela un ID modale:
const openEls = document.querySelectorAll("");const isVisible = "is-visible";for(const el of openEls) { el.addEventListener("click", function() { const modalId = this.dataset.open; document.getElementById(modalId).classList.add(isVisible); });}
E classi CSS pertinenti:
.modal { visibility: hidden; opacity: 0; transition: all 0.35s ease-in;}.modal.is-visible { visibility: visible; opacity: 1;}
Chiudi il Modal
Con la nostra implementazione Una volta che un modale può apparire solo in un momento (questo codice non supporta i modi nidificati). Come accennato nella sezione di selezione precedente, ci sono tre metodi disponibili per nasconderlo con un effetto di sbiadimento (dissolvenza).
Recap.
PRIMA, facendo clic sull’elemento personalizzato che si trova all’interno del Modal:
const closeEls = document.querySelectorAll("");const isVisible = "is-visible";for (const el of closeEls) { el.addEventListener("click", function() { this.parentElement.parentElement.parentElement.classList.remove(isVisible); });}
Secondo, facendo clic su Anywhere Outside the Modal:
const isVisible = "is-visible";document.addEventListener("click", e => { if (e.target == document.querySelector(".modal.is-visible")) { document.querySelector(".modal.is-visible").classList.remove(isVisible); }});
In questo caso, il modal (sovrapposizione) si comporta come una chiusura gigante pulsante. Per questo motivo gli abbiamo dato cursor: pointer.
Infine, premendo :
const isVisible = "is-visible";document.addEventListener("keyup", e => { if (e.key == "Escape" && document.querySelector(".modal.is-visible")) { document.querySelector(".modal.is-visible").classList.remove(isVisible); }});
è un buon momento per vedere cosa abbiamo creato finora:
Il modal sembra molto buono! Si noti che ogni volta che facciamo clic su un attivatore aperto, viene addebitato il Modal corrispondente.
Diamo un altro passo ed esaminiamo alcune idee per incoraggiare il tuo dialogo.
4. Aggiungi animazioni al
Dialog come indicato prima, il comportamento predefinito del Modal è l’aspetto graduale (sbiadito) e la sbiadimento graduale (dissolvenza). Ma c’è la possibilità di regolare l’effetto di animazione della finestra pop-up.
Ho già creato abbastanza effetti di animazione che potresti usare come alternativa all’effetto di sbiadimento. Per fare ciò, devi semplicemente passare l’attributo a .modal.
Ad esempio, se vuoi Il dialogo appare con un’animazione scorrevole da sinistra a destra, è necessario l’effetto slideInOutLeft.
dietro le scene, ci sono due regole che raggiungono questa animazione:
/*CUSTOM VARIABLES HERE*/ .modal-dialog { opacity: 0; transform: translateX(-100%); transition: all 0.5s var(--bounceEasing);}.is-visible .modal-dialog { opacity: 1; transform: none; transition-delay: 0.2s;}
Controllare il modal con questo tipo di animazione qui:
Puoi controllare il resto delle animazioni guardando la scheda CSS di il progetto di dimostrazione finale. A seconda della complessità delle animazioni, ho usato transizioni o animazioni CSS per crearli.
Ho anche usato la funzione cubic-bezier() per regolare la funzione temporale di tutte le transizioni. Se non ti piace l’effetto di rimbalzo che produce, sentiti libero di cambiarlo in qualcosa di fluido tramite la variabile --bounceEasing CSS.
Guarda la dimostrazione finale con tutti gli effetti Animazione qui:
conclusione
Questo è tutto, amici! Durante questo tutorial abbiamo imparato a creare dialoghi di modo vivaci personalizzati senza dipendere da qualsiasi framework front-end.
Spero che ti sia piaciuto il risultato finale e che la tua creazione ti abbia aiutato a aggiornare le tue abilità frontali. Fine
Essere presenti che non abbiamo considerato l’accessibilità, quindi se vuoi migliorare questa dimostrazione, potrebbe essere il prossimo passo.
Come sempre, grazie per la lettura!
Altre letture su Windows pop-up
-
plugin di wordpresspiù di 20 dei migliori plugin di wordpress per Windows emergente e opt-innona blackman -
Design UIil modo migliore per utilizzare finestre di dialogo (modals) nel Web DesignADI Purdila -
wordpressCome creare finestre pop-up spettacolari in wordpress con elementer proADI Purpardila