Un Ghid de instruire pentru casetele modale cu Javascript, HTML și CSS

Recent, am făcut saltul de la crearea de aplicații Ruby complet la lucrul cu Javascript. După cum poate știți deja, Javascript permite utilizatorilor sau clienților să interacționeze cu o pagină web și să redea dinamic conținut nou DOM bazat pe interactivitatea utilizatorului. În comparație cu codificarea în Ruby on Rails (în care fiecare redirecție necesită o reîmprospătare a paginii complete), abilitatea de a redea diverse elemente de pagină bazate pe interacțiunile utilizatorilor cu Javascript mi-au adus abilitățile de dezvoltare frontend din 1994 și în prezent. Cu înțelegerea mea rudimentară a Javascriptului, acum pot crea un element web interactiv pe care așteptam să îl pun în aplicare în proiectele mele: căsuțe de mesaje - sau ferestre pop-up.

O modalitate, sau casetă de dialog, este o casetă de mesaj care apare în browser după o anumită interactivitate a utilizatorului specificată. Înainte de a ne afunda în specificul creării unei căsuțe modale pentru site-ul dvs. cu HTML, CSS și Javascript, să examinăm mai întâi diferitele tipuri de căsuțe de mesaje pe care le puteți întâlni.

Tipuri de cutii de mesaje

Alerte

O alertă este o casetă de mesaje, de obicei blocată în browser, care necesită un răspuns sau interacțiune a utilizatorului înainte de a putea fi respinsă și dispare de pe pagină. Poate doriți ca clientul să recunoască informațiile (Termenii de utilizare) sau pagina în sine confirmă completarea unui formular. Cu toate acestea, până la respingerea alertei, clientul nu poate interacționa cu restul paginii.

Caseta de mesaje de alertă

Pop-up

Un pop-up este o casetă de mesaj lipicioasă (credeți că „se lipește” de pagină, nu lipicioasă precum bomboanele) care apare în browser care nu necesită interacțiune sau atenție imediată. Dacă un utilizator dorește să dispară, va trebui să se închidă sau să interacționeze cu fereastra în acel moment, dar interactivitatea restului paginii este funcțională. Notificările sunt un exemplu de tip pop-up.

Popup caseta de mesaje

Notificare Growl / Notificare Flash

O notificare crescătoare este un pop-up care se demite singură după o perioadă de timp asociată. Acestea sunt denumite uneori și notificări flash. Utilizatorul poate interacționa cu notificarea growl - poate pentru a respinge din timp caseta de mesaje sau pentru a face clic pe un buton din cadrul notificării - sau poate alege să ignore și va dispărea după expirarea timerului. Ca și un pop-up, notificarea growl permite clientului să continue să interacționeze cu restul paginii. Un exemplu în acest sens este o notificare prin e-mail sau social media.

Notificare Growl

Casetă lightbox / Teatru

O cutie luminoasă sau un teatru este o casetă de mesaje care mărește de obicei conținut care era deja disponibil în browser pentru ca un utilizator să se concentreze pe acesta. Un caz uzual este o imagine sau o serie de imagini afișate într-o galerie. Când o cutie de lumină sau un teatru este folosit cu mai multe bucăți de conținut, este considerat „blocat” atunci când un utilizator poate naviga prin conținutul asociat în interiorul căsuței de iluminare, în loc să revină la pagina inițială și apoi să facă clic pe următoarea imagine din serie. a mari.

Casetă lightbox / Teatru

Popover / cărților de vizită

Una dintre casetele de mesaje mai mici, un popover sau un hovercard apare doar pe ecran atunci când un utilizator își plimbă mouse-ul peste o zonă selectată. Aceste căsuțe de mesaje pot conține instrucțiuni sau explicații cu privire la butonul sau containerul pe care utilizatorul îl trece în prezent; acestea pot conține, de asemenea, o previzualizare a informațiilor disponibile dacă utilizatorul face clic pe un link.

Popover / cărților de vizită

Caseta Modal / Dialog

În cele din urmă, o casetă de modă sau de dialog este o casetă de mesaje care permite o interactivitate suplimentară a paginii fără a naviga departe de conținutul actual din browser. O casetă modală nu este blocată pe ecran (adică, clientul poate naviga departe de ea fără o interacțiune necesară), deși este în mod obișnuit focalizarea utilizatorului (bazată pe stilul dvs. al casetei). În cele mai multe cazuri, dacă un utilizator dorește să respingă modalitatea, poate pur și simplu să închidă caseta cu un buton furnizat sau să facă clic în afara modului. Un exemplu de modalitate este atunci când un utilizator trebuie să completeze un formular sau să furnizeze informații specifice pentru o interogare de căutare, dar nu doriți ca acestea să navigheze pe o altă pagină.

Caseta Modal / Dialog

Implementarea unui Modal

Pentru a crea și implementa o modalitate pe pagina dvs., există trei pași pe care trebuie să îi parcurgeți pentru funcționalitate:

  1. HTML: marcaj pentru a crea elementul modal
  2. CSS: stil pentru a determina cum arată și apare modalitatea dvs. pe pagină
  3. Javascript: plasarea ascultătorilor de evenimente astfel încât modalul să apară / să dispară în funcție de interactivitatea utilizatorului

HTML

Pentru cea mai simplă modalitate, avem nevoie de un buton (sau de orice element de pagină pe care îl preferați) pe care un utilizator poate face clic pentru a activa modalul, modalul real și probabil că veți dori să implementați un buton de închidere în cadrul modalului.

 faceți clic pe mine, fac o modalitate 

În cele de mai sus, puteți vedea că avem un buton care va apărea în HTML-ul nostru, precum și un modal, cu trei clase CSS: modal, modal-btn și close-btn. Fiecare dintre acestea va fi inclus în CSS de mai jos. Prima div este containerul părinte care conține întreaga modalitate cu o clasă de modal. Intern, avem un div care conține conținutul pentru modalul propriu-zis: butonul pentru a închide modalul în intervalul și textul într-un ptag.

Ca o privire rapidă, puteți, de asemenea, să implementați anteturi și subsoluri în modalitatea dvs., prin simpla creare a mai multor div-uri în HTML și în alte clase CSS, în scopuri de design. De exemplu:

CSS

Pentru a pune în stil fiecare element din HTML-ul nostru modal simplu, trebuie să creăm clasele CSS asociate: .modal, .modal-content și .close-btn. Mai departe, puteți vedea mai jos că este inclusă și CSS pentru a crea animație pentru modal.

.modal {
  afișare: niciuna;
  poziție: fix;
  umplutură: 50px;
  stanga: 0;
  top: 0;
  latime: 100%;
  inaltime: 100%;
  fundal-culoare: rgb (0, 0, 0);
  fundal-culoare: rgba (0, 0, 0, 0,5);
}
.modal-content {
  poziție: relativă;
  fundal-culoare: alb;
  captusire: 20px;
  marja: auto;
  latime: 75%;
  -webkit-animation-name: animatetop;
  -webkit-animație-durata: 0,4s;
  animație-nume: animatetop;
  animație-durată: 0,4s
}
.close-btn {
  float: dreapta;
  culoare: lumină;
  font-size: 24px;
  font-greutate: bold;
}
.close-btn: hover {
  culoare: întuneric;
}
@ -webkit-keyframes animatetop {
  de la {top: -300px; opacitate: 0}
  până la {top: 0; opacitate: 1}
}
@keyframes animatetop {
  de la {top: -300px; opacitate: 0}
  până la {top: 0; opacitate: 1}
}

În clasele de mai sus, avem design pentru fiecare dintre elementele pe care le-am creat în HTML-ul nostru.

Clasa .modal în sine are atribute care determină modul în care tratează pagina în spatele modalului propriu: o lățime și o înălțime în comparație cu pagina din spatele casetei de dialog, o culoare (acest exemplu folosește un gri semi-opac) și o setare de vizibilitate astfel că îl putem comuta în Javascript-ul nostru atunci când un utilizator face clic pe buton.

Pentru caseta de dialog reală, avem, de asemenea, un stil separat în conținut .modal: poziționarea acesteia pe stilul de fundal, o culoare de fundal pentru caseta de dialog în sine, umplere, iar în acest exemplu este inclusă animație, astfel încât modalul să scadă din partea de sus a paginii.

Mai mult, am conceput o clasă .close-btn care plutește o „x” spre dreapta și cu .close-btn: hover, când utilizatorul va trece peste butonul de închidere, culoarea se va schimba. Pentru o mai mare claritate, utilizatorul poate face clic în afara modului pentru a închide caseta de dialog la fel ca pe butonul de închidere. Vom crea un ascultător de evenimente pentru ambele opțiuni din Javascript.

Asta abia zgârie suprafața CSS pe care ai putea să o implementezi de unul singur. Simțiți-vă liber să ajustați codul de mai sus pentru a se potrivi cel mai bine cu nevoile dvs.

Javascript

În sfârșit, trebuie să scriem câteva Javascript pentru a crea funcționalitatea modalului.

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

Am selectat mai multe obiecte din HTML-ul nostru și le-am atribuit variabilelor: un modal-btn, modalul în sine și the close-btn. Apoi, am creat ascultători de evenimente pentru evenimente on-click. Când un utilizator face clic pe modal-btn, stilul de afișare este setat pe „bloc”, dar atunci când face clic pe close-btn sau pe fereastra din afara modalului (reprezentat în stilul nostru drept gri semi-opac), Stilul de afișare este apoi setat pe „none”. Aceasta ascunde eficient modalul până când fac clic din nou pe btn modal.

Tipar Modal pe ecran

În general, jocul cu DOM cu Javascript a fost incredibil de distractiv și plin de satisfacții ca un coder început. Sperăm că codul de mai sus vă va ajuta să implementați și modale și căsuțe de mesaje. Cu câteva funcții rapide de Googling, puteți găsi, de asemenea, resurse suplimentare pentru a regla modale și casete de dialog pentru cazurile dvs. de utilizare.

Mult noroc acolo și codificare fericită!

Resurse

Stack Exchange: Modale, ferestre de tip pop-up, pop-up și lightboxes

w3schools: How To - CSS / JS Modal

Sabe: Cum să creezi o casetă pop-up modală cu CSS și JavaScript