caseta de mesaj de alertă

popup

un popup este un lipicios (cred că „bastoane” la pagina, nu lipicios ca bomboane) caseta de mesaj care apare în browser-ul care nu are nevoie de interacțiune imediată sau atenție. Dacă un utilizator dorește ca acestea să dispară, va trebui să închidă sau să interacționeze cu fereastra pop-up în acel moment, dar interactivitatea restului paginii este încă funcțională. Notificările sunt un exemplu de pop-up.

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. Utilizatorul poate interacționa cu notificarea growl — poate să respingă caseta de mesaj devreme, sau să faceți clic pe un buton în notificare — sau pot alege să ignore și va dispărea după expirarea cronometrul. Ca 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.

Growl notificare

lightbox/theatre

un lightbox sau un Theatre este o casetă de mesaje care de obicei mărește conținutul care era deja disponibil în browser pentru ca un utilizator să se concentreze asupra acestuia. Un caz de utilizare obișnuită este o imagine sau o serie de imagini afișate într-o galerie. Atunci când un lightbox sau teatru este angajat cu mai multe bucăți de conținut, acesta este considerat ‘blocat’ atunci când un utilizator poate naviga prin conținutul asociat în cadrul lightbox în sine, în loc de a reveni la pagina originală și, ulterior, făcând clic pe următoarea imagine din serie pentru a mări.

Lightbox/teatru

popover / hovercard

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

Modal/casetă de Dialog

implementarea unui modal

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

1. HTML: markup pentru a crea elementul modal
2. CSS: styling pentru a determina modul în care modul dvs. arată și apare pe pagina
3. JavaScript: plasarea ascultătorilor de evenimente astfel încât Modalul să apară / să dispară în funcție de interactivitatea utilizatorului

HTML

pentru cele mai simple moduri, avem nevoie de un buton (sau orice element de pagină preferați) pe care un utilizator poate face clic pentru a activa Modalul, Modalul real și probabil veți dori să implementați un buton de închidere în modal.

<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>

în cele de mai sus, puteți vedea că avem un buton care va apărea în HTML-ul nostru, precum și un modal a, cu trei clase CSS: modalmodal-btn și close-btn. Fiecare dintre acestea vor fi incluse în CSS de mai jos. Primul div este containerul părinte care conține întregul modal cu o clasă de modal. Pe plan intern, avem un div care conține conținutul pentru modal în sine: butonul pentru a închide modal în span și textul într-un ptag.

ca o scurtă deoparte, puteți implementa, de asemenea, anteturi și subsoluri în modal prin crearea pur și simplu mai multe divs în HTML și alte clase CSS în scopuri de styling. De exemplu:

<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

pentru a stiliza fiecare dintre elementele din HTML-ul nostru modal simplu, trebuie să creăm clasele CSS asociate: .modal.modal-content și .close-btn. Mai mult, puteți vedea mai jos că există, de asemenea, CSS inclus pentru a crea animație pentru modal.

.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}
}

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

.modal clasa în sine are atribute care determină modul în care tratează pagina din spatele modal în sine: o lățime și î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 încât să o putem comuta în Javascript-ul nostru atunci când un utilizator face clic pe buton.

pentru caseta de dialog propriu-zisă, avem și un stil separat în .modal-content: poziționându-l pe stilul de fundal, o culoare de fundal pentru caseta de dialog în sine, umplutură, iar în acest exemplu există animație inclusă, astfel încât Modalul să scadă din partea de sus a paginii.

Mai departe, am stilat o.close-btn clasa care plutește un”x”la dreapta, și cu.close-btn:hover, atunci când utilizatorul planează peste butonul de închidere, Culoarea se va schimba. Pentru claritate, utilizatorul poate face clic în afara modalului pentru a închide caseta de dialog la fel ca făcând clic pe butonul închidere. Vom crea un ascultător de evenimente pentru ambele opțiuni în Javascript-ul nostru.

Acest lucru abia zgârie suprafața CSS pe care ați putea să o implementați pe cont propriu. Simțiți-vă liber să ajustați codul de mai sus pentru a se potrivi cel mai bine nevoilor dvs.

Javascript

În cele din urmă, avem nevoie pentru a scrie unele Javascript pentru a crea funcționalitatea modal.

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"
}
}

am selectat mai multe obiecte din HTML-ul nostru și le-am atribuit variabilelor: a modal-btnmodal în sine și close-btn. Apoi, am creat ascultători de evenimente pentruonclick evenimente. Când un utilizator face clic pe modal-btn, stilul de afișare este setat la "block”, dar când face clic pe close-btn sau fereastra din afara modalului (reprezentată în stilul nostru ca gri semi-opac), stilul de afișare este apoi setat la "none". Acest lucru ascunde în mod eficient modal până când faceți clic pe modal-btn din nou.