Dialogit ja modaalit ovat olennainen osa useimpia verkkosovelluksia. Vaikka niiden rakentaminen käsin ei ole monimutkainen tehtävä, siitä tulee nopeasti tylsää jokaiselle verkkokehittäjälle. Tavallinen vaihtoehto niiden rakentamiselle käsin on käyttää jonkun muun valmistamaa komponenttia.

Tässä lähestymistavassa on kuitenkin pari ongelmaa. Vaihtoehtoja on niin monia, että on vaikea tietää, mikä komponentti olisi paras käyttää, ja tällaisten komponenttien ulkoasun mukauttaminen voi joskus olla yhtä työlästä kuin dialogin rakentaminen käsin. Onneksi on olemassa toinen vaihtoehto: HTML-dialogielementti.

Mikä on dialogielementti?

HTML-valintaikkunaelementti on sisäänrakennettu HTML-tunniste (kuten div tai span), jonka avulla kehittäjät voivat luoda mukautettuja dialogeja ja modaaleja. Dialogielementti on ollut käytössä Chromessa ja Operassa vuodesta 2014, mutta vasta äskettäin kaikki yleisimmät selaimet tukevat sitä.

Miksi käyttää valintaikkunaelementtiä?

Ensisijainen syy dialogielementin käyttöön on mukavuus. Sen avulla on helppo luoda valintaikkunoita, jotka voivat näkyä joko rivissä tai modaaleina, joissa on vain yksi HTML-tunniste ja muutama JavaScript-rivi.

instagram viewer

Dialogielementti poistaa tarpeen luoda ja korjata mukautettua valintaikkunaa tai tuoda jonkun muun komponenttia. Se on myös erittäin helppo muotoilla CSS: llä.

Selaintuki valintaikkunaelementille

Valitettavasti selaintuki dialogielementille voisi olla parempi. Se on tuettu kaikkien yleisimpien selainten uusimmissa versioissa maaliskuusta 2022 alkaen tietyin varoin.

Mikä tahansa Firefox 98:aa vanhempi Firefox-selain tukee sitä vain, jos se on manuaalisesti otettu käyttöön selaimen asetuksissa, ja mikään Safari 15.4:ää vanhempi Safari-versio ei tue sitä ollenkaan. Selaimen täydelliset tukitiedot ovat saatavilla osoitteessa Voinko käyttää.

Onneksi tämä ei tarkoita, että dialogielementti olisi käyttökelvoton. Google Chrome -tiimi ylläpitää monitäytteitä, joista voit löytää Github valintaikkunaelementille, joka tukee sitä myös selaimissa, joissa sitä ei tueta alkuperäisesti.

Nykyisessä muodossaan dialogielementissä voi olla saavutettavuusongelmia, joten saattaa olla sopivampaa käyttää mukautettua dialogikomponenttia, kuten a11y-valintaikkuna tuotantosovelluksissa.

Dialogielementin käyttäminen

Havainnollistaaksesi dialogielementin käyttöä, käytät sitä yhteisen verkkosivuston ominaisuuden rakentamiseen: poistopainikkeen vahvistusmodaalin.

Tarvitset vain yhden HTML-tiedoston.

1. Asenna HTML-tiedosto

Aloita luomalla mainittu tiedosto ja nimeämällä se index.html.

Määritä seuraavaksi HTML-tiedoston rakenne ja anna sivusta joitakin perusmetatietoja, jotta se hahmontuu oikein kaikilla laitteilla.

Kirjoita seuraava koodi index.html: ään:

<!DOCTYPE html>
<html lang="fi">
<pää>
<meta charset="UTF-8">
<meta http-equiv="X-UA-yhteensopiva" sisältö="IE = reuna">
<metanimi="näkymä" sisältö="leveys = laitteen leveys, alkumittakaava = 1,0">
<otsikko>Dialogin demo</title>
</head>
<tyyli></style>


<kehon></body>
<käsikirjoitus></script>
</html>

Siinä on kaikki tähän projektiin tarvittavat asetukset.

2. Merkintöjen kirjoittaminen

Kirjoita seuraavaksi poistopainikkeen merkintä sekä valintaikkuna.

Kirjoita seuraava koodi index.html: n body-tunnisteeseen:

<div class="painike-säiliö">
<-painiketta>
Poistaa kohde
</button>
</div>
<valintaikkuna>
<div>
 Oletko varma että haluat poistaaTämä kohde?
</div>
<div>
<painikeluokka="kiinni">
 Joo
</button>
<painikeluokka="kiinni">
 Ei
</button>
</div>
</dialog>

Yllä oleva HTML luo:

  • Poista-painike.
  • Dialogielementti.
  • Kaksi painiketta valintaikkunan sisällä.

Jos index.html on auki selaimessasi, ainoa näytöllä näkyvä elementti on poistopainike. Tämä ei tarkoita, että mitään vikaa olisi, dialogielementti vaatii yksinkertaisesti hieman JavaScriptiä tullakseen näkyviin.

3. JavaScriptin lisääminen

Kirjoita nyt koodi, joka avaa valintaikkunan, kun käyttäjä napsauttaa poistopainiketta, sekä koodi, joka sallii valintaikkunan sulkemisen.

Kirjoita index.html-tiedoston komentosarjatunnisteeseen seuraava:

konst modaalinen = asiakirja.querySelector("valintaikkuna")
document.querySelector(".button-container-painike").addEventListener("klikkaus", () => {
modaalinen.showModal();
});
konst closeBtns = asiakirja.getElementsByClassName("sulje");
for (btn of closeBtns) {
 btn.addEventListener("klikkaus", () => {
modaalinen.kiinni();
 })
}

Tämä koodi käyttää querySelector-menetelmää saadaksesi viittauksia painikkeisiin ja valintaikkunaan. Sitten se liittää jokaiseen painikkeeseen napsautustapahtuman kuuntelijan.

Saatat olla tuttu tapahtumakuuntelijoita JavaScriptissä, jota voit käyttää itse. Poista-painikkeeseen liitetty tapahtumaseuranta kutsuu showModal()-menetelmää näyttääkseen valintaikkunan, kun painiketta napsautetaan.

Jokaiseen modaalin sisällä olevaan painikkeeseen on liitetty tapahtuman kuuntelija, joka käyttää close()-menetelmää piilottaakseen valintaikkunan, kun niitä napsautetaan.

Vaikka koodissa ei olisi JavaScriptiä, joka kutsuisi close()-menetelmää, käyttäjät voivat myös sulkea modaalin painamalla näppäimistön Esco-näppäintä.

Nyt kun tämä JavaScript on käytössä, jos käyttäjä napsauttaa poistopainiketta, modaali avautuu ja kyllä- tai ei-painikkeen napsauttaminen sulkee modaalin.

Avatun modaalin pitäisi näyttää tältä:

Yksi huomioitava asia on, että dialogielementissä on jo jonkin verran tyyliä, vaikka index.html: ssä ei ole CSS: ää. Modaali on jo keskitetty, siinä on reunus, leveys on rajoitettu sisältöön ja siinä on oletustäyte.

Käyttäjät eivät voi olla vuorovaikutuksessa (napsauttaa, valita) minkään kanssa taustalla modaalin ollessa auki.

Dialogielementti voi myös näyttää itsensä osana sivun kulkua modaalin sijaan. Kokeile sitä vaihtamalla JavaScriptin ensimmäinen tapahtumakuuntelija seuraavasti:

document.querySelector(".button-container-painike").addEventListener("klikkaus", () => { modal.show(); });

Ainoa asia, joka on muuttunut tässä koodissa, on se, että koodi kutsuu show()-metodia showModal()-metodin sijaan. Nyt, kun käyttäjä napsauttaa kohteen poistamispainiketta, modaalin pitäisi avautua sisäänpäin seuraavasti:

4. Lisää tyyli

Mukauta seuraavaksi valintaikkunan ulkoasua ja sen taustaa kirjoittamalla CSS.

CSS pienentää valintaikkunan reunaa, rajoittaa sen enimmäisleveyttä ja tummentaa sitten taustaa sekä lisää painikkeiden tyyliä.

Itse dialogin muotoilu on yksinkertaista, mutta taustan pseudoluokka on välttämätön dialogin taustalle kohdistetun tyylin lisäämiseksi.

Liitä seuraava koodi index.html: n tyylitunnisteeseen:

dialogi:: tausta {
 tausta: musta;
opasiteetti: 0.5;
}
painike {
 reunan säde: 2px;
 taustaväri: valkoinen;
 reuna: 1px tasainen musta;
 marginaali: 5px;
 laatikkovarjo: 1px 1px 2px harmaa;
}
dialogi {
 suurin leveys: 90vw;
 reuna: 1px tasainen musta;
}

Kun valintaikkuna on auki, sen pitäisi nyt näyttää tältä:

Ja olet rakentanut täysin toimivan dialogin.

Dialogielementti on loistava tapa rakentaa modaaleja

Käyttämällä HTML-valintaikkunaelementtiä, joka sai äskettäin tuen kaikissa yleisimmissä selaimissa, verkkokehittäjät voivat nyt rakentaa täysin toimivan, helposti muokattavat modaalit ja dialogit yhdellä HTML-tunnisteella ja muutamalla JavaScript-rivillä ilman, että sinun tarvitsee luottaa kolmannen osapuolen puoleen ratkaisu.

Dialogielementissä on Google Chrome -tiimin ylläpitämä polyfill, jonka avulla kehittäjät voivat käyttää dialogia selainversioissa, jotka eivät tue sitä.