Dialogi un modāļi ir neatņemamas vairuma tīmekļa lietojumprogrammu sastāvdaļas. Lai gan to izveide ar rokām nav sarežģīts uzdevums, tas ātri kļūst apnicīgs jebkuram tīmekļa izstrādātājam. Parastā alternatīva to veidošanai ar rokām ir kāda cita izgatavota komponenta izmantošana.

Tomēr šai pieejai ir dažas problēmas. Ir tik daudz iespēju, ka kļūst grūti zināt, kuru komponentu vislabāk izmantot, un šādu komponentu izskata pielāgošana dažkārt var būt tikpat nogurdinoša kā dialoga izveide ar rokām. Par laimi, ir vēl viena alternatīva: HTML dialoga elements.

Kas ir dialoga elements?

HTML dialoga elements ir iebūvēts HTML tags (piemēram, div vai span), kas ļauj izstrādātājiem izveidot pielāgotus dialogus un modālus. Dialoga elements pārlūkprogrammās Chrome un Opera ir pieejams kopš 2014. gada, taču tikai nesen to atbalstīja visas galvenās pārlūkprogrammas.

Kāpēc izmantot dialoga elementu?

Dialoga elementa izmantošanas galvenais iemesls ir ērtības. Tas atvieglo dialogu veidošanu, kas var parādīties iekļauti vai parādīti kā modāli, izmantojot tikai vienu HTML tagu un dažas JavaScript rindiņas.

Dialoga elements novērš nepieciešamību izveidot un atkļūdot pielāgotu dialoglodziņu vai importēt kāda cita komponentu. To ir arī ļoti viegli veidot ar CSS.

Pārlūka atbalsts dialoga elementam

Diemžēl pārlūkprogrammas atbalsts dialoga elementam varētu būt labāks. No 2022. gada marta tas tiek atbalstīts visu lielāko pārlūkprogrammu jaunākajās versijās ar dažiem brīdinājumiem.

Jebkura Firefox pārlūkprogramma, kas vecāka par Firefox 98, to atbalstīs tikai tad, ja tā ir manuāli iespējota pārlūkprogrammas iestatījumos, un jebkura Safari versija, kas vecāka par Safari 15.4, to neatbalsta vispār. Pilna pārlūkprogrammas atbalsta informācija ir pieejama vietnē caniuse.

Par laimi, tas nenozīmē, ka dialoga elements nav lietojams. Google Chrome komanda uztur aizpildījumu, kurā varat atrast Github dialoga elementam, kas nodrošina to atbalstu pat pārlūkprogrammās, kurās tas netiek sākotnēji atbalstīts.

Pašreizējā formā dialoga elementam var būt pieejamības problēmas, tāpēc varētu būt piemērotāk izmantot pielāgotu dialoga komponentu, piemēram, a11y-dialogs ražošanas lietojumos.

Kā lietot dialoga elementu

Lai parādītu, kā izmantot dialoga elementu, jūs to izmantosit, lai izveidotu kopēju vietnes līdzekli: dzēšanas pogas apstiprinājuma modālu.

Viss, kas jāievēro, ir viens HTML fails.

1. Iestatiet HTML failu

Sāciet, izveidojot minēto failu un nosaucot to index.html.

Pēc tam izveidojiet HTML faila struktūru un sniedziet pamatinformāciju par lapu, lai tā tiktu pareizi renderēta visās ierīcēs.

Ievadiet šādu kodu index.html:

<!DOCTYPE html>
<html lang="lv">
<galvu>
<meta rakstzīmju kopa ="UTF-8">
<meta http-equiv="X-UA saderīgs" saturs="IE=mala">
<meta nosaukums ="skata logs" saturs="platums = ierīces platums, sākotnējais mērogs = 1,0">
<virsraksts>Dialoga demonstrācija</title>
</head>
<stils></style>


<ķermenis></body>
<skripts></script>
</html>

Tas ir viss, kas nepieciešams šim projektam.

2. Marķējuma rakstīšana

Pēc tam ierakstiet dzēšanas pogas atzīmi, kā arī dialoga elementu.

Ievadiet šādu kodu index.html pamatteksta tagā:

<div klase="poga-konteiners">
<pogu>
Dzēst lieta
</button>
</div>
<dialoglodziņš>
<div>
 Vai tiešām vēlaties? dzēstšis lieta?
</div>
<div>
<pogas klase="aizveriet">
 Jā
</button>
<pogas klase="aizveriet">
 Nē
</button>
</div>
</dialog>

Iepriekš esošais HTML izveidos:

  • Dzēšanas poga.
  • Dialoga elements.
  • Divas pogas dialoglodziņā.

Ja pārlūkprogrammā ir atvērts index.html, vienīgais ekrānā redzamais elements būs dzēšanas poga. Tas nenozīmē, ka kaut kas nav kārtībā, dialoga elementam vienkārši ir nepieciešams mazliet JavaScript, lai tas kļūtu redzams.

3. JavaScript pievienošana

Tagad ierakstiet kodu, kas atvērs dialoglodziņu, kad lietotājs noklikšķinās uz dzēšanas pogas, kā arī kodu, kas ļauj aizvērt dialoglodziņu.

Faila index.html skripta tagā ierakstiet šo:

konst modāls = dokumentu.querySelector("dialogs")
document.querySelector(".poga-konteinera poga").addEventListener("klikšķis", () => {
modāls.showModal();
});
konst closeBtns = dokumentu.getElementsByClassName("close");
for (btn of closeBtns) {
 btn.addEventListener("klikšķis", () => {
modāls.aizvērt();
 })
}

Šis kods izmanto metodi querySelector lai iegūtu atsauces uz pogām un dialoglodziņu. Pēc tam katrai pogai tas pievieno klikšķu notikumu uztvērēju.

Jūs varētu būt pazīstams ar notikumu klausītāji JavaScript, ko varat izmantot pats. Dzēšanas pogai pievienotais notikumu uztvērējs izsauc metodi showModal(), lai parādītu dialoglodziņu, kad tiek noklikšķināts uz pogas.

Katrai modāla iekšpusē esošajai pogai ir pievienots notikumu uztvērējs, kas izmanto aizvēršanas () metodi, lai paslēptu dialoglodziņu, kad uz tās tiek noklikšķināts.

Pat ja kodā nav JavaScript, kas izsauc close() metodi, lietotāji var arī aizvērt modālu, nospiežot tastatūras atsoļa taustiņu.

Tagad, kad šis JavaScript ir ieviests, ja lietotājs noklikšķina uz dzēšanas pogas, modāls tiks atvērts, un, noklikšķinot uz pogas Jā vai Nē, modāls tiks aizvērts.

Atvērtajam modālam vajadzētu izskatīties šādi:

Jāatzīmē, ka dialoga elementam jau ir zināms stils, lai gan failā index.html nav CSS. Modāls jau ir centrēts, tam ir apmale, platums ir ierobežots līdz saturam, un tam ir kāds noklusējuma polsterējums.

Lietotāji nevar mijiedarboties (noklikšķināt, atlasīt) ne ar ko fonā, kamēr modāls ir atvērts.

Dialoga elements var parādīties arī kā daļa no lapas plūsmas, nevis kā modāls. Lai to izmēģinātu, mainiet JavaScript pirmo notikumu klausītāju šādi:

document.querySelector(".poga-konteinera poga").addEventListener("klikšķis", () => { modal.show(); });

Vienīgais, kas šajā kodā ir mainījies, ir tas, ka kods izsauc show() metodi, nevis showModal() metodi. Tagad, kad lietotājs noklikšķina uz vienuma dzēšanas pogas, modālam vajadzētu atvērties šādi:

4. Pievienot stilu

Pēc tam pielāgojiet dialoglodziņa izskatu un tā fonu, ierakstot CSS.

CSS samazinās dialoglodziņa apmali, ierobežos tā maksimālo platumu un pēc tam padarīs tumšāku fonu, kā arī pievienos pogām nelielu stilu.

Paša dialoga stila veidošana ir vienkārša, taču fona pseidoklase ir nepieciešama, lai pievienotu stilu, kas ir vērsts uz dialoga fonu.

Ielīmējiet šādu kodu indeksa.html stila tagā:

dialoglodziņš:: fons {
 fons: melns;
necaurredzamība: 0.5;
}
poga {
 apmales rādiuss: 2 pikseļi;
 fona krāsa: balta;
 apmale: 1px vienkrāsains melns;
 mala: 5 pikseļi;
 box-shadow: 1px 1px 2px pelēks;
}
dialogs {
 maksimālais platums: 90vw;
 apmale: 1px vienkrāsains melns;
}

Kad dialoglodziņš ir atvērts, tam vajadzētu izskatīties šādi:

Un jūs esat izveidojis pilnībā funkcionējošu dialoglodziņu.

Dialoga elements ir lielisks veids, kā izveidot modāļus

Izmantojot HTML dialoga elementu, kas nesen tika atbalstīts visās lielākajās pārlūkprogrammās, tīmekļa izstrādātāji tagad var izveidot pilnībā funkcionējošus, viegli pielāgojami modāļi un dialoglodziņi ar vienu HTML tagu un dažām JavaScript rindiņām un bez nepieciešamības paļauties uz trešo pusi risinājums.

Dialoga elementam ir Google Chrome komandas uzturēts polifils, kas ļauj izstrādātājiem izmantot dialoglodziņu pārlūkprogrammas versijās, kas to neatbalsta.