Dialoogid ja modaalid on enamiku veebirakenduste lahutamatud osad. Kuigi nende käsitsi ehitamine pole keeruline ülesanne, muutub see kiiresti iga veebiarendaja jaoks tüütuks. Tavaline alternatiiv nende käsitsi ehitamisele on kellegi teise ehitatud komponendi kasutamine.

Selle lähenemisviisiga on siiski paar probleemi. Võimalusi on nii palju, et on raske teada, millist komponenti oleks kõige parem kasutada ja Selliste komponentide välimuse kohandamine võib mõnikord olla sama tüütu kui dialoogi loomine käsitsi. Õnneks on veel üks alternatiiv: HTML-i dialoogielement.

Mis on dialoogielement?

HTML-i dialoogielement on sisseehitatud HTML-märgend (nagu div või span), mis võimaldab arendajatel luua kohandatud dialooge ja modaale. Dialoogielement on Chrome'is ja Operas olnud kasutusel alates 2014. aastast, kuid alles hiljuti hakkasid seda toetama kõik suuremad brauserid.

Miks kasutada dialoogielementi?

Dialoogielemendi kasutamise peamine põhjus on mugavus. Selle abil on lihtne luua dialooge, mis võivad ilmuda tekstisiseselt või modaalidena, millel on ainult üks HTML-märgend ja paar JavaScripti rida.

instagram viewer

Dialoogielement eemaldab vajaduse luua ja siluda kohandatud dialoogi või importida kellegi teise komponenti. Samuti on CSS-iga väga lihtne stiilida.

Dialoogielemendi brauseri tugi

Kahjuks võiks dialoogielemendi brauseri tugi olla parem. Seda toetavad 2022. aasta märtsi seisuga kõigi suuremate brauserite uusimad versioonid teatud hoiatustega.

Kõik Firefoxi brauserid, mis on vanemad kui Firefox 98, toetavad seda ainult siis, kui see on brauseri seadetes käsitsi lubatud, ja mis tahes Safari versioon, mis on varasem kui Safari 15.4, ei toeta seda üldse. Täieliku brauseri toe üksikasjad on saadaval aadressil Kas ma võin kasutada.

Õnneks ei tähenda see, et dialoogielement oleks kasutuskõlbmatu. Google Chrome'i tiim haldab polütäidet, millelt leiate Github dialoogielemendi jaoks, mis toetab seda isegi brauserites, kus see pole algselt toetatud.

Praegusel kujul võib dialoogielemendil olla juurdepääsetavuse probleeme, mistõttu võib olla sobivam kasutada kohandatud dialoogikomponenti nagu a11y-dialoog tootmisrakendustes.

Kuidas kasutada dialoogielementi

Dialoogielemendi kasutamise demonstreerimiseks kasutate seda veebisaidi ühise funktsiooni loomiseks: kustutamisnupu kinnitusmoodul.

Järgimiseks on vaja ainult ühte HTML-faili.

1. Seadistage HTML-fail

Alustage nimetatud faili loomisest ja nimetage see index.html.

Järgmisena määrake HTML-faili struktuur ja esitage lehe kohta põhiline metateave, et see renderdataks kõigis seadmetes õigesti.

Tippige faili index.html järgmine kood:

<!DOCTYPE html>
<html lang="et">
<pea>
<metamärgistik="UTF-8">
<meta http-equiv="X-UA-ühilduv" sisu="IE = serv">
<meta nimi="vaateava" sisu="laius = seadme laius, esialgne skaala = 1,0">
<pealkiri>Dialoogi demo</title>
</head>
<stiilis></style>


<keha></body>
<stsenaarium></script>
</html>

See on kõik selle projekti jaoks vajalik seadistus.

2. Märgistuse kirjutamine

Järgmisena kirjutage kustutamisnupu märgistus ja dialoogielement.

Tippige indeks.html kehamärgendisse järgmine kood:

<div klass="nupp-konteiner">
<nuppu>
Kustuta üksus
</button>
</div>
<dialoog>
<div>
 Kas olete kindel, et soovite kustutadasee ese?
</div>
<div>
<nupu klass="Sulge">
 Jah
</button>
<nupu klass="Sulge">
 Ei
</button>
</div>
</dialog>

Ülaltoodud HTML loob:

  • Kustuta nupp.
  • Dialoogi element.
  • Kaks nuppu dialoogiaknas.

Kui teie brauseris on avatud index.html, on ainuke ekraanil nähtav element kustutamisnupp. See ei tähenda, et midagi oleks valesti, dialoogielement vajab nähtavaks saamiseks lihtsalt natuke JavaScripti.

3. JavaScripti lisamine

Nüüd kirjutage kood, mis avab dialoogi, kui kasutaja klõpsab kustutamisnupul, ja kood, mis lubab dialoogi sulgeda.

Tippige faili index.html skriptimärgendisse järgmine tekst:

konst modaalne = dokument.querySelector("dialoog")
document.querySelector(".nupp-konteiner nupp").addEventListener("klõpsa", () => {
modaalne.showModal();
});
konst closeBtns = dokument.getElementsByClassName("close");
for (btn of closeBtns) {
 btn.addEventListener("klõpsa", () => {
modaalne.Sulge();
 })
}

See kood kasutab meetodit querySelector nuppudele ja dialoogiaknale viidete saamiseks. Seejärel lisab see igale nupule klõpsusündmuste kuulaja.

Võib-olla olete tuttav sündmuste kuulajad JavaScriptis, mida saate ise kasutada. Kustutusnupuga seotud sündmuste kuulaja kutsub välja meetodi showModal(), et kuvada nupul klõpsamisel dialoog.

Igal modaalis oleval nupul on sündmuste kuulaja, mis kasutab sulgemismeetodit, et peita dialoog, kui sellel klõpsatakse.

Isegi kui koodis ei ole JavaScripti, mis kutsuks sulge()-meetodit, saavad kasutajad modaali sulgeda, vajutades klaviatuuril paoklahvi.

Nüüd, kui see JavaScript on paigas, siis kui kasutaja klõpsab kustutamisnupul, avaneb modaal ja jah või ei nupul klõpsates modaal suletakse.

Avatud modaal peaks välja nägema selline:

Tähelepanuväärne on see, et dialoogielemendil on juba teatud stiil, kuigi failis index.html pole CSS-i. Modaal on juba tsentreeritud, sellel on ääris, laius on piiratud sisuga ja sellel on vaikepolster.

Kui modaal on avatud, ei saa kasutajad taustal millegagi suhelda (klõpsata, valida).

Dialoogielement võib end modaali asemel kuvada ka lehe voo osana. Selle proovimiseks muutke JavaScriptis esimest sündmuste kuulajat järgmiselt:

document.querySelector(".nupp-konteiner nupp").addEventListener("klõpsa", () => { modal.show(); });

Ainus, mis selles koodis on muutunud, on see, et kood kutsub meetodi show() asemel showModal() meetodit. Nüüd, kui kasutaja klõpsab üksuse kustutamise nupul, peaks modaal avanema järgmiselt:

4. Lisage stiil

Järgmisena kohandage dialoogi välimust ja tausta, kirjutades CSS-i.

CSS vähendab dialoogi äärist, piirab selle maksimaalset laiust ja seejärel muudab tausta tumedamaks ning lisab nuppudele veidi stiili.

Dialoogi stiili kujundamine on lihtne, kuid tausta pseudoklass on vajalik stiili lisamiseks, mis sihib dialoogi tausta.

Kleepige järgmine kood faili index.html stiilimärgendisse:

dialoog:: taust {
 taust: must;
läbipaistmatus: 0.5;
}
nupp {
 piiri raadius: 2px;
 taustavärv: valge;
 ääris: 1px täismust;
 veeris: 5 pikslit;
 kast-vari: 1px 1px 2px hall;
}
dialoog {
 maksimaalne laius: 90vw;
 ääris: 1px täismust;
}

Kui dialoog on avatud, peaks see nüüd välja nägema järgmine:

Ja olete loonud täielikult toimiva dialoogi.

Dialoogielement on suurepärane viis modaalide loomiseks

Kasutades HTML-i dialoogielementi, mida hiljuti toetati kõigis suuremates brauserites, saavad veebiarendajad nüüd luua täielikult toimivaid, hõlpsasti kohandatavad modaalid ja dialoogid ühe HTML-i märgendi ja mõne JavaScripti reaga, ilma et peaksite kasutama kolmandat osapoolt lahendus.

Dialoogielemendil on Google Chrome'i meeskonna hallatav polüfill, mis võimaldab arendajatel kasutada dialoogi brauseri versioonides, mis seda ei toeta.