Dijalozi i modali sastavni su dijelovi većine web aplikacija. Iako njihova ručna izrada nije složen zadatak, to je zadatak koji brzo postaje zamoran za svakog web developera. Uobičajena alternativa ručnoj izradi je korištenje komponente koju je izradio netko drugi.

Međutim, postoji nekoliko problema s ovim pristupom. Postoji toliko mnogo opcija da postaje teško znati koju komponentu bi bilo najbolje koristiti, i prilagođavanje izgleda takvih komponenti ponekad može biti jednako zamorno kao i izgradnja dijaloga ručno. Srećom, postoji još jedna alternativa: HTML element dijaloškog okvira.

Što je element dijaloga?

HTML element dijaloškog okvira je ugrađena HTML oznaka (poput div ili span) koja programerima omogućuje stvaranje prilagođenih dijaloških okvira i modala. Element dijaloškog okvira postoji u Chromeu i Operi od 2014. godine, ali su ga tek nedavno podržali svi glavni preglednici.

Zašto koristiti element dijaloga?

Primarni razlog za korištenje dijaloškog elementa je praktičnost. Olakšava izradu dijaloških okvira koji se mogu pojaviti u liniji ili se mogu prikazati kao modalni, s ništa više od jedne HTML oznake i nekoliko redaka JavaScripta.

Element dijaloškog okvira uklanja potrebu za izradom i otklanjanjem pogrešaka prilagođenog dijaloškog okvira ili uvozom tuđe komponente. Također je vrlo lako stilizirati pomoću CSS-a.

Podrška preglednika za dijaloški element

Nažalost, podrška preglednika za dijaloški element mogla bi biti bolja. Podržan je u najnovijim verzijama svih glavnih preglednika od ožujka 2022., uz neka upozorenja.

Bilo koji preglednik Firefox stariji od Firefoxa 98 podržavat će ga samo ako je ručno omogućen u postavkama preglednika, a bilo koja verzija Safarija starija od Safarija 15.4 ga uopće ne podržava. Potpuni detalji podrške pregledniku dostupni su na mogu li koristiti.

Srećom, to ne znači da je dijaloški element neupotrebljiv. Tim za Google Chrome održava polifil na kojem možete pronaći Github za element dijaloškog okvira koji za njega pruža podršku čak i na preglednicima u kojima nije izvorno podržan.

U svom trenutnom obliku, element dijaloškog okvira može imati problema s pristupačnošću, pa bi možda bilo prikladnije koristiti prilagođenu komponentu dijaloškog okvira kao što je a11y-dijalog u proizvodnim aplikacijama.

Kako koristiti element dijaloga

Da biste demonstrirali kako koristiti element dijaloškog okvira, koristit ćete ga za izgradnju uobičajene značajke web-mjesta: modalnu potvrdu za gumb za brisanje.

Sve što je potrebno za praćenje je jedna HTML datoteka.

1. Postavite HTML datoteku

Započnite stvaranjem navedene datoteke i imenovanjem index.html.

Zatim uspostavite strukturu HTML datoteke i navedite neke osnovne meta-informacije o stranici, tako da se ispravno renderira na svim uređajima.

Upišite sljedeći kod u index.html:

<!DOCTYPE html>
<html lang="en">
<glava>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibilan" sadržaj="IE=rub">
<meta name="okvir za prikaz" sadržaj="širina=širina-uređaja, početna-skala=1,0">
<titula>Demo dijaloga</title>
</head>
<stil></style>


<tijelo></body>
<skripta></script>
</html>

To je sve što je potrebno za ovaj projekt.

2. Pisanje oznake

Zatim napišite oznaku za gumb za brisanje, kao i element dijaloškog okvira.

Upišite sljedeći kod u oznaku tijela index.html:

<div klasa="gumb-spremnik">
<dugme>
Izbrisati artikal
</button>
</div>
<dijalog>
<razd>
 Jesi li siguran da želiš izbrisatiovaj artikal?
</div>
<razd>
<gumb klasa="Zatvoriti">
 Da
</button>
<gumb klasa="Zatvoriti">
 Ne
</button>
</div>
</dialog>

Gornji HTML će stvoriti:

  • Gumb za brisanje.
  • Element dijaloga.
  • Dva gumba unutar dijaloškog okvira.

Ako je index.html otvoren u vašem pregledniku, jedini vidljiv element na zaslonu bit će gumb za brisanje. To ne znači da nešto nije u redu, dijaloški element jednostavno zahtijeva malo JavaScripta da bi postao vidljiv.

3. Dodavanje JavaScripta

Sada napišite kod koji će otvoriti dijaloški okvir kada korisnik klikne gumb za brisanje, kao i kod koji će omogućiti zatvaranje dijaloga.

Upišite sljedeće u oznaku skripte index.html:

konst modalni = dokument.querySelector("dijalog")
document.querySelector(".gumb-spremnik gumb").addEventListener("klik", () => {
modalni.showModal();
});
konst closeBtns = dokument.getElementsByClassName("close");
za (btn od closeBtns) {
 btn.addEventListener("klik", () => {
modalni.Zatvoriti();
 })
}

Ovaj kod koristi metodu querySelector da biste dobili reference na gumbe i dijaloški okvir. Zatim svakom gumbu prilaže slušatelj događaja klika.

Možda ste upoznati s slušatelji događaja u JavaScriptu, koje možete koristiti i sami. Slušatelj događaja povezan s gumbom za brisanje poziva metodu showModal() za prikaz dijaloškog okvira kada se klikne na gumb.

Svaki gumb unutar modala ima priložen slušatelj događaja koji koristi metodu close() za skrivanje dijaloškog okvira kada se klikne.

Čak i ako u kodu ne postoji JavaScript koji poziva metodu close(), korisnici također mogu zatvoriti modal pritiskom na tipku escape na svojoj tipkovnici.

Sada kada je ovaj JavaScript na mjestu, ako korisnik klikne gumb za brisanje, modal će se otvoriti, a klikom na gumb da ili ne zatvorit će se modalni.

Ovako bi trebao izgledati otvoreni modal:

Jedna stvar koju treba napomenuti je da element dijaloga već dolazi s nekim stilom, iako nema CSS-a u index.html. Modalni je već centriran, ima obrub, širina je ograničena na sadržaj i ima zadani padding.

Korisnici ne mogu komunicirati (kliknuti, odabrati) ni s čim u pozadini dok je modal otvoren.

Element dijaloškog okvira također se može prikazati kao dio tijeka stranice umjesto kao modalni. Da biste ga isprobali, promijenite prvi slušatelj događaja u JavaScriptu na sljedeći način:

document.querySelector(".gumb-spremnik gumb").addEventListener("klik", () => { modal.show(); });

Jedina stvar koja se promijenila u ovom kodu je da kod poziva metodu show() umjesto metode showModal(). Sada, kada korisnik klikne na gumb za brisanje stavke, modalni bi se trebao otvoriti na sljedeći način:

4. Dodajte stil

Zatim prilagodite izgled dijaloškog okvira i njegovu pozadinu pisanjem CSS-a.

CSS će smanjiti obrub dijaloga, ograničiti njegovu maksimalnu širinu, a zatim potamniti pozadinu, kao i dodati malo stila gumbima.

Stiliziranje samog dijaloga je jednostavno, ali pseudo klasa pozadine neophodna je za dodavanje stila koji cilja na pozadinu dijaloga.

Zalijepite sljedeći kod u oznaku stila index.html:

dijalog:: pozadina {
 pozadina: crna;
neprozirnost: 0.5;
}
dugme {
 radijus granice: 2px;
 boja pozadine: bijela;
 obrub: 1px puna crna;
 margina: 5px;
 box-shadow: 1px 1px 2px siva;
}
dijaloški okvir {
 maksimalna širina: 90vw;
 obrub: 1px puna crna;
}

Kada je dijaloški okvir otvoren, sada bi trebao izgledati ovako:

I izgradili ste potpuno funkcionalan dijalog.

Element dijaloga izvrstan je način za izgradnju modala

Koristeći HTML element dijaloškog okvira koji je nedavno dobio podršku u svim glavnim preglednicima, web programeri sada mogu izgraditi potpuno funkcionalne, lako prilagodljivi modali i dijalozi s jednom HTML oznakom i nekoliko redaka JavaScripta i bez potrebe da se oslanjate na treću stranu riješenje.

Element dijaloškog okvira ima polifil koji održava tim za Google Chrome, koji programerima omogućuje korištenje dijaloškog okvira u verzijama preglednika koje ga ne podržavaju.