Dialogurile și modalele sunt părți integrante ale majorității aplicațiilor web. Deși construirea lor manual nu este o sarcină complexă, este una care devine rapid obositoare pentru orice dezvoltator web. Alternativa obișnuită la construirea lor manuală este să folosești o componentă construită de altcineva.
Există totuși câteva probleme cu această abordare. Există atât de multe opțiuni, încât devine greu de știut care componentă ar fi cel mai bine de utilizat și Personalizarea aspectului unor astfel de componente poate fi uneori la fel de obositoare ca construirea unui dialog de mana. Din fericire, există o altă alternativă: elementul de dialog HTML.
Ce este elementul de dialog?
Elementul de dialog HTML este o etichetă HTML încorporată (cum ar fi div sau span), care permite dezvoltatorilor să creeze dialoguri și modal personalizate. Elementul de dialog există în Chrome și Opera din 2014, dar a devenit recent acceptat de toate browserele majore.
De ce să folosiți elementul de dialog?
Motivul principal pentru a utiliza elementul de dialog este comoditatea. Facilitează crearea de dialoguri care pot apărea fie în linie, fie ca modal, cu nimic mai mult decât o singură etichetă HTML și câteva rânduri de JavaScript.
Elementul de dialog elimină necesitatea de a construi și de a depana un dialog personalizat sau de a importa componenta altcuiva. De asemenea, este foarte ușor să stilați cu CSS.
Suport pentru browser pentru elementul de dialog
Din păcate, suportul browserului pentru elementul de dialog ar putea fi mai bun. Este acceptat în cele mai recente versiuni ale tuturor browserelor majore din martie 2022, cu unele avertismente.
Orice browser Firefox mai vechi decât Firefox 98 îl va accepta doar dacă este activat manual în setările browserului, iar orice versiune Safari anterioară Safari 15.4 nu îl acceptă deloc. Detaliile complete de asistență pentru browser sunt disponibile pe pot folosi.
Din fericire, acest lucru nu înseamnă că elementul de dialog este inutilizabil. Echipa Google Chrome menține un polyfill pe care îl puteți găsi Github pentru elementul de dialog care oferă suport pentru acesta chiar și în browserele în care nu este acceptat nativ.
În forma sa actuală, elementul de dialog poate avea probleme de accesibilitate, așa că ar putea fi mai potrivit să utilizați o componentă de dialog personalizată, cum ar fi a11y-dialog în aplicaţiile de producţie.
Cum să utilizați elementul de dialog
Pentru a demonstra cum să utilizați elementul de dialog, îl veți folosi pentru a construi o caracteristică comună a site-ului web: un mod de confirmare pentru un buton de ștergere.
Tot ceea ce este necesar pentru a urma este un singur fișier HTML.
1. Configurați fișierul HTML
Începeți prin a crea fișierul menționat și numiți-l index.html.
Apoi, stabiliți structura fișierului HTML și furnizați câteva meta-informații de bază despre pagină, astfel încât să fie redată corect pe toate dispozitivele.
Tastați următorul cod în index.html:
<!DOCTYPE html>
<limba html="ro">
<cap>
<meta charset="UTF-8">
<meta http-equiv="Compatibil X-UA" continut="IE=marginea">
<meta nume="fereastra de vizualizare" continut="lățime=lățime-dispozitiv, scară inițială=1,0">
<titlu>Dialog demonstrativ</title>
</head><stil></style>
<corp></body>
<scenariu></script>
</html>
Asta este toată configurația necesară pentru acest proiect.
2. Scrierea Markup-ului
Apoi, scrieți marcajul pentru butonul de ștergere, precum și elementul de dialog.
Introdu următorul cod în eticheta body a index.html:
<div class="buton-recipient">
<buton>
Șterge articol
</button>
</div>
<dialog>
<div>
Ești sigur că vrei să ștergeacest articol?
</div>
<div>
<clasa de buton="închide">
da
</button>
<clasa de buton="închide">
Nu
</button>
</div>
</dialog>
HTML-ul de mai sus va crea:
- Un buton de ștergere.
- Elementul de dialog.
- Două butoane în interiorul casetei de dialog.
Dacă index.html este deschis în browserul dvs., singurul element vizibil pe ecran va fi butonul de ștergere. Acest lucru nu înseamnă că este ceva în neregulă, elementul de dialog necesită pur și simplu puțin JavaScript pentru a deveni vizibil.
3. Adăugarea JavaScript
Acum, scrieți codul care va deschide dialogul atunci când un utilizator face clic pe butonul de ștergere, precum și codul pentru a permite dialogul să se închidă.
Introduceți următoarele în eticheta de script de la index.html:
const modal = document.querySelector(„dialog”)
document.querySelector(".buton-buton container").addEventListener("clic", () => {
modal.showModal();
});
const closeBtns = document.getElementsByClassName(„închidere”);
pentru (btn of closeBtns) {
btn.addEventListener("clic", () => {
modal.închide();
})
}Acest cod folosește metoda querySelector pentru a obține referințe la butoane și dialog. Apoi atașează un ascultător de eveniment de clic la fiecare buton.
S-ar putea să fii familiarizat cu ascultători de evenimente în JavaScript, pe care îi puteți folosi singur. Ascultătorul de evenimente atașat butonului de ștergere apelează metoda showModal() pentru a afișa dialogul atunci când se face clic pe butonul.
Fiecare buton din interiorul modalului are atașat un ascultător de evenimente care folosește metoda close() pentru a ascunde dialogul atunci când se face clic pe el.
Chiar dacă nu există JavaScript care să apeleze metoda close() în cod, utilizatorii pot închide și modulul apăsând tasta de escape de pe tastatură.
Acum că acest JavaScript este activat, dacă un utilizator face clic pe butonul de ștergere, modalul se va deschide, iar făcând clic pe butonul da sau nu se va închide modalul.
Iată cum ar trebui să arate modalul deschis:
Un lucru de remarcat este că elementul de dialog vine deja cu un stil, chiar dacă nu există nici un CSS în index.html. Modalul este deja centrat, are un chenar, lățimea este limitată la conținut și are o umplutură implicită.
Utilizatorii nu pot interacționa (dați clic, selectați) cu nimic din fundal în timp ce modalul este deschis.
Elementul de dialog se poate afișa ca parte a fluxului paginii și nu ca modal. Pentru a-l încerca, schimbați primul ascultător de evenimente din JavaScript astfel:
document.querySelector(".buton-buton container").addEventListener("clic", () => { modal.show(); });Singurul lucru care s-a schimbat în acest cod este că codul apelează metoda show() în loc de metoda showModal(). Acum, când un utilizator dă clic pe butonul de ștergere a articolului, modalul ar trebui să se deschidă în linie astfel:
4. Adăugați stil
Apoi, personalizați aspectul dialogului și fundalul acestuia scriind CSS.
CSS va reduce marginea casetei de dialog, va limita lățimea maximă a acestuia și apoi va întuneca fundalul, precum și va adăuga puțin stil la butoane.
Stilizarea dialogului în sine este simplă, dar pseudoclasa de fundal este necesară pentru a adăuga stil care vizează fundalul dialogului.
Lipiți următorul cod în eticheta de stil index.html:
dialog:: fundal {
fundal: negru;
opacitate: 0.5;
}
butonul {
chenar-rază: 2px;
culoare de fundal: alb;
chenar: 1px negru solid;
marginea: 5px;
box-shadow: 1px 1px 2px gri;
}
dialog {
latime maxima: 90vw;
chenar: 1px negru solid;
}
Când dialogul este deschis, ar trebui să arate acum astfel:
Și ați creat un dialog complet funcțional.
Elementul de dialog este o modalitate excelentă de a construi modali
Folosind elementul de dialog HTML care a câștigat recent suport în toate browserele majore, dezvoltatorii web pot acum să construiască pe deplin funcțional, Modalități și dialoguri ușor de personalizat, cu o etichetă HTML și câteva linii de JavaScript și fără a fi nevoie să vă bazați pe o terță parte soluţie.
Elementul de dialog are un polyfill întreținut de echipa Google Chrome, care permite dezvoltatorilor să folosească dialogul în versiunile de browser care nu îl acceptă.
