Com crear un modal emergent amb JavaScript des de zero

Posted on by admin

En aquest tutorial aprendrem a crear maneres emergents amb JavaScript (finestres de diàleg) sense utilitzar un framework de treball com Bootstrap, o una biblioteca de tercers. Crearem tot des de zero, oferint-nos un control complet sobre com funciona i com es veu. A

Aquí està la demostració que crearem:

1. Inicia amb el marcatge de la pàgina

Primer crearem un modal. Per fer-ho, afegirem la classe .modal i una ID única a un contenidor. Després especificarem el diàleg establint un element .modal-dialog com a element secundari directe de l’.modal. El diàleg ha de contenir el contingut de l’modal. Pot ser qualsevol tipus de contingut com a text, imatges, lightboxes, notificacions / alertes d’usuaris, etc.

“Una finestra de diàleg (o modal) és un petit element d’interfície d’usuari (UI) que apareix en primer pla en un lloc web, generalment s’activa com un avís perquè l’usuari faci alguna cosa “- Adi Purdila a

Per obrir un modal, necessitarem qualsevol element amb l’atribut data-open (normalment button). El valor d’aquest atribut ha de ser la identificació de l’modal desitjat.

Per defecte, 1 modal es tancarà si fem clic fora dels seus límits o quan pressionem la tecla Esc. Però també podem tancar-lo si fem clic a qualsevol element amb l’atribut data-close (normalment button).

A el principi , el modal apareixerà / desapareixerà amb un efecte d’esvaïment. Però tenim la capacitat d’ajustar l’efecte d’animació de l’diàleg mitjançant l’atribut data-animation. El valor d’aquest atribut que s’ha d’afegir a .modal pot ser qualsevol dels següents valors:

  • slideInOutDown
  • slideInOutTop
  • slideInOutLeft a
  • slideInOutRight a
  • zoomInOut
  • rotateInOutDown a
  • mixInAnimations

Veurem més de prop aquests valors en una propera secció.

per ara, anem a familiaritzar-nos amb el marcatge que es necessita per representar un només modal: a 

<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. Defineix alguns estils bàsics

Amb el marcat preparat, configurarem algunes variables CSS i reiniciarem els estils: a 

: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;}

Després, centrarem de manera horitzontal i vertical el contingut d i la pàgina. A més, li donarem alguns estils a el botó responsable d’obrir el 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;}

En aquest punt, centrarem la nostra atenció en els estils de l’modal.

Cada modal tindrà les següents característiques:

  • Serà a pantalla completa amb una posició fixa. És a dir, es veurà com una superposició que cobreix tot l’ample i alt de la finestra.
  • Tindrà un color de fons fosc.
  • Estarà ocult per defecte.
  • El diàleg estarà centrat de forma horitzontal i vertical. 
/*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;}

El diàleg tindrà una amplada i una altura màximes. La seva altura serà el 80% de l’alçada de la finestra. En els casos en que la seva altura excedeixi aquest valor, apareixerà una barra de desplaçament vertical: 

/*CUSTOM VARIABLES HERE*/.modal-dialog { position: relative; max-width: 800px; max-height: 80vh; border-radius: 5px; background: var(--white); overflow: auto; cursor: default;}

Finalment, definirem uns quants estils simples per a cadascuna de les seccions de contingut: 

/*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;}

a

3. Alternant el modal

Una pàgina pot tenir més d’un modal. Però com es va comentar anteriorment, tots els modals estaran ocults a el principi.

Obre el modal

De la mateixa manera, una pàgina pot tenir més d’un activador obert (elements amb l’atribut data-open). Cada vegada que es faci clic en un activador, el modal associat hauria de fer-se visible amb una animació apareixent gradualment (fade-in). Recorda que el valor de l’atribut data-open ha de coincidir amb l’ID d’un modal.

Aquí està l’script que revela un modal: 

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); });}

I les classes rellevants de CSS: 

.modal { visibility: hidden; opacity: 0; transition: all 0.35s ease-in;}.modal.is-visible { visibility: visible; opacity: 1;}

Tanca el modal

Amb la nostra implementació únicament pot aparèixer un modal alhora (aquest codi no suporta modals niats). Com es va esmentar en la secció de marcat anterior, hi ha tres mètodes disponibles per a ocultar amb un efecte d’esvaïment (fade-out).

Recapitulem.

En primer lloc, fent clic a l’element personalitzat que es localitza dins de l’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); });}

en segon lloc, fent clic a arreu fora de l’modal: a 

const isVisible = "is-visible";document.addEventListener("click", e => { if (e.target == document.querySelector(".modal.is-visible")) { document.querySelector(".modal.is-visible").classList.remove(isVisible); }});

en aquest cas, el modal (la superposició ) es comporta com un botó gegant de tancament. Per aquesta raó li vam donar cursor: pointer.

Finalment, pressionant la tecla Esc: 

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); }});

És un bon moment per veure el que hem creat fins ara:

La modal es veu molt bé! Observa que cada vegada que fem clic a un activador obert, uúnicamente es carrega el modal corresponent.

Fem un pas més i examinem algunes idees per animar el seu diàleg.

4. Afegeix animacions a el diàleg

Com ho vam indicar abans, el comportament per defecte de l’modal és aparició gradual (fade-in) i esvaïment gradual (fade-out). Però hi ha l’opció d’ajustar l’efecte d’animació de la finestra emergent.

Ja he creat bastants efectes d’animació que podries utilitzar com a alternativa a l’efecte d’esvaïment. Per fer-ho, simplement has de passar l’atribut data-animation="yourDesiredAnimation" a .modal.

Per exemple, si vols que el diàleg aparegui amb una animació de lliscament d’esquerra a dreta, et caldrà l’efecte slideInOutLeft.

Darrere d’escenes, hi ha dues regles que aconsegueixen aquesta animació: 

/*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;}

Revisa el modal amb aquest tipus d’animació aquí:

Pots revisar la resta de les animacions mirant la pestanya de CSS de el projecte final de la demostració . Depenent de la complexitat de les animacions, he utilitzat transicions CSS o animacions per crear-les.

També he fet servir la funció cubic-bezier() per ajustar la funció de temps de totes les transicions. Si no us agrada l’efecte de rebot que produeix, sentir-se lliure de canviar-ho a una mica més suau mitjançant la variable --bounceEasing CSS.

Mira la demostració final amb tots els efectes d’animació aquí:

Conclusió

Això és tot, amics! Durant aquest tutorial vam aprendre a crear diàlegs modals animats personalitzats sense dependre de cap framework de front-end.

Espero que hagis gaudit d’el resultat final i que la seva creació t’hagi ajudat a posar a el dia les teves habilitats de front- end.

Tingues present que no hem considerat l’accessibilitat, així que si volen millorar aquesta demostració, aquest podria ser el següent pas.

Com sempre, gràcies per llegir-nos!

Més lectures sobre finestres emergents

  • Plugins de WordPress
    Més de 20 de els millors plugins de WordPress per a finestres emergents i Opt-In
    Nona Blackman
  • Disseny d’UI
    La millor manera d’usar finestres de diàleg (modals) en el teu disseny web
    Adi Purdila
  • WordPress
    Com crear finestres emergents espectaculars en WordPress amb Elementor Pro
    Adi Purdila

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *