Dialogai ir modalai yra neatskiriama daugumos žiniatinklio programų dalis. Nors jų kūrimas rankomis nėra sudėtingas uždavinys, bet kuriam žiniatinklio kūrėjui greitai tampa nuobodus. Įprasta alternatyva statyti juos rankomis yra naudoti kieno nors kito pagamintą komponentą.
Tačiau su šiuo požiūriu yra keletas problemų. Yra tiek daug galimybių, todėl tampa sunku žinoti, kurį komponentą būtų geriausia naudoti, ir tokių komponentų išvaizdos pritaikymas kartais gali būti toks pat varginantis kaip dialogo kūrimas ranka. Laimei, yra ir kita alternatyva: HTML dialogo elementas.
Kas yra dialogo elementas?
HTML dialogo elementas yra integruota HTML žyma (pvz., div arba span), kuri leidžia kūrėjams kurti pasirinktinius dialogo langus ir modalus. Dialogo elementas „Chrome“ ir „Opera“ naudojamas nuo 2014 m., tačiau tik neseniai jį palaiko visos pagrindinės naršyklės.
Kodėl verta naudoti dialogo elementą?
Pagrindinė priežastis, kodėl verta naudoti dialogo elementą, yra patogumas. Tai leidžia lengvai kurti dialogo langus, kurie gali būti rodomi eilėje arba kaip modaliniai, naudojant tik vieną HTML žymą ir kelias JavaScript eilutes.
Dialogo elementas pašalina poreikį kurti ir derinti pasirinktinį dialogo langą arba importuoti kieno nors kito komponentą. Taip pat labai lengva sukurti stilių naudojant CSS.
Dialogo elemento naršyklės palaikymas
Deja, naršyklės dialogo elemento palaikymas galėtų būti geresnis. Nuo 2022 m. kovo mėn. jis palaikomas naujausiose visų pagrindinių naršyklių versijose su tam tikrais įspėjimais.
Bet kuri „Firefox“ naršyklė, senesnė nei „Firefox 98“, ją palaikys tik tuo atveju, jei naršyklės nustatymuose ji įjungta rankiniu būdu, o bet kuri senesnė nei „Safari 15.4“ Safari versija jos visiškai nepalaiko. Visą naršyklės palaikymo informaciją rasite adresu ar galiu naudoti.
Laimei, tai nereiškia, kad dialogo elementas yra netinkamas naudoti. „Google Chrome“ komanda prižiūri daugialypį užpildą, kurį galite rasti Github dialogo elementui, kuris palaiko jį net naršyklėse, kuriose jis nėra savaime palaikomas.
Dabartinėje formoje dialogo elementas gali turėti pritaikymo neįgaliesiems problemų, todėl gali būti tinkamiau naudoti pasirinktinį dialogo komponentą, pvz. a11y-dialogas gamybinėse programose.
Kaip naudoti dialogo elementą
Norėdami parodyti, kaip naudoti dialogo elementą, jį naudosite kurdami bendrą svetainės funkciją: ištrynimo mygtuko patvirtinimo būdą.
Viskas, ko reikia, yra vienas HTML failas.
1. Nustatykite HTML failą
Pradėkite nuo minėto failo kūrimo ir pavadinimo index.html.
Tada nustatykite HTML failo struktūrą ir pateikite pagrindinės metainformacijos apie puslapį, kad jis būtų tinkamai pateikiamas visuose įrenginiuose.
Įveskite šį kodą į index.html:
<!DOCTYPE html>
<html lang="lt">
<galva>
<meta charset="UTF-8">
<meta http-equiv="Suderinamas su X-UA" turinys="IE = kraštas">
<meta vardas ="peržiūros sritis" turinys="plotis = įrenginio plotis, pradinė skalė = 1,0">
<titulą>Dialogo demonstracija</title>
</head><stilius></style>
<kūnas></body>
<scenarijus></script>
</html>
Tai viskas, ko reikia šiam projektui.
2. Žymėjimo rašymas
Tada parašykite trynimo mygtuko žymėjimą ir dialogo elementą.
Į index.html turinio žymą įveskite šį kodą:
<div klasė ="mygtukas-konteineris">
<mygtuką>
Ištrinti daiktas
</button>
</div>
<dialogas>
<div>
Ar tikrai norite Ištrintitai prekė?
</div>
<div>
<mygtuko klasė="Uždaryti">
Taip
</button>
<mygtuko klasė="Uždaryti">
Nr
</button>
</div>
</dialog>
Aukščiau pateiktas HTML sukurs:
- Ištrynimo mygtukas.
- Dialogo elementas.
- Du mygtukai dialogo lange.
Jei naršyklėje atidarytas index.html, vienintelis ekrane matomas elementas bus trynimo mygtukas. Tai nereiškia, kad kažkas negerai, dialogo elementui tiesiog reikia šiek tiek JavaScript, kad jis būtų matomas.
3. „JavaScript“ pridėjimas
Dabar parašykite kodą, kuris atidarys dialogo langą, kai vartotojas spustelėja mygtuką ištrinti, taip pat kodą, leidžiantį uždaryti dialogo langą.
Į index.html scenarijaus žymą įveskite:
konst modalinis = dokumentas.querySelector("dialogas")
document.querySelector(".mygtukas-konteineris mygtukas").addEventListener("spustelėkite", () => {
modalinis.showModal();
});
konst closeBtns = dokumentas.getElementsByClassName("close");
for (btn of closeBtns) {
btn.addEventListener("spustelėkite", () => {
modalinis.Uždaryti();
})
}Šis kodas naudoja querySelector metodą norėdami gauti nuorodas į mygtukus ir dialogo langą. Tada prie kiekvieno mygtuko prideda paspaudimo įvykių klausytoją.
Galbūt esate susipažinę su įvykių klausytojai JavaScript, kuriuos galite naudoti patys. Prie ištrynimo mygtuko pridėtas įvykių klausytojas iškviečia metodą showModal(), kad būtų rodomas dialogo langas, kai spustelėjamas mygtukas.
Kiekvienas modalo mygtukas turi įvykių klausytoją, kuris naudoja uždarymo () metodą, kad paslėptų dialogo langą spustelėjus.
Net jei kode nėra JavaScript, kuris iškviečia close() metodą, vartotojai taip pat gali uždaryti modalą paspausdami klaviatūros pabėgimo klavišą.
Dabar, kai šis „JavaScript“ įdiegtas, jei vartotojas spustelėja trynimo mygtuką, modalas bus atidarytas, o spustelėjus mygtuką „taip“ arba „ne“, modalas bus uždarytas.
Taip turėtų atrodyti atidarytas modalas:
Reikia atkreipti dėmesį į tai, kad dialogo elementas jau turi tam tikrą stilių, nors indekse.html nėra CSS. Modalas jau yra centre, turi kraštinę, plotis ribojamas iki turinio ir turi tam tikrą numatytąjį užpildymą.
Vartotojai negali sąveikauti (spustelėti, pasirinkti) su niekuo fone, kol modalas yra atidarytas.
Dialogo elementas taip pat gali būti rodomas kaip puslapio srauto dalis, o ne kaip modalas. Norėdami tai išbandyti, pakeiskite pirmąjį įvykių klausytoją „JavaScript“ taip:
document.querySelector(".mygtukas-konteineris mygtukas").addEventListener("spustelėkite", () => { modal.show(); });Vienintelis dalykas, kuris pasikeitė šiame kode, yra tai, kad kodas iškviečia show() metodą, o ne showModal() metodą. Dabar, kai vartotojas spustelėja elemento ištrynimo mygtuką, modalas turėtų atsidaryti taip:
4. Pridėti stilių
Tada pritaikykite dialogo lango išvaizdą ir jo foną rašydami CSS.
CSS sumažins dialogo lango kraštinę, apribos maksimalų jo plotį ir patamsins foną, taip pat pridės šiek tiek mygtukų stiliaus.
Pats dialogo lango stilius yra nesudėtingas, tačiau fono pseudo klasė yra būtina norint pridėti stilių, skirtą dialogo fonui.
Į index.html stiliaus žymą įklijuokite šį kodą:
dialogo langas:: fonas {
fonas: juodas;
neskaidrumas: 0.5;
}
mygtukas {
kraštinės spindulys: 2 pikseliai;
fono spalva: balta;
kraštinė: 1px vientisa juoda;
paraštė: 5 pikseliai;
langelis-šešėlis: 1px 1px 2px pilka;
}
dialogas {
maksimalus plotis: 90vw;
kraštinė: 1px vientisa juoda;
}
Kai dialogo langas atidarytas, jis dabar turėtų atrodyti taip:
Ir jūs sukūrėte visiškai funkcionalų dialogą.
Dialogo elementas yra puikus būdas kurti modalus
Naudodami HTML dialogo elementą, kuris neseniai buvo palaikomas visose pagrindinėse naršyklėse, žiniatinklio kūrėjai dabar gali sukurti visiškai funkcionalų, lengvai pritaikomi modalai ir dialogai su viena HTML žyma ir keliomis JavaScript eilutėmis ir nereikia pasikliauti trečiąja šalimi sprendimas.
Dialogo elementas turi daugialypį užpildymą, kurį palaiko „Google Chrome“ komanda, todėl kūrėjai gali naudoti dialogo langą naršyklės versijose, kurios jo nepalaiko.
