Pogovorna okna in modali so sestavni deli večine spletnih aplikacij. Čeprav jih ročna izdelava ni zapletena naloga, pa hitro postane dolgočasna za vsakega spletnega razvijalca. Običajna alternativa za njihovo ročno izdelavo je uporaba komponente, ki jo je izdelal nekdo drug.

Vendar pa obstaja nekaj težav s tem pristopom. Možnosti je toliko, da je težko vedeti, katero komponento bi bilo najbolje uporabiti, in prilagajanje videza takšnih komponent je včasih lahko prav tako dolgočasno kot gradnja pogovornega okna ročno. Na srečo obstaja še ena alternativa: element pogovornega okna HTML.

Kaj je element dialoga?

Element pogovornega okna HTML je vgrajena oznaka HTML (kot je div ali span), ki razvijalcem omogoča ustvarjanje pogovornih oknov in modal po meri. Element pogovornega okna je v Chromu in Operi prisoten od leta 2014, vendar so ga šele pred kratkim podprli vsi večji brskalniki.

Zakaj uporabljati element dialoga?

Glavni razlog za uporabo elementa pogovornega okna je priročnost. Omogoča enostavno sestavljanje pogovornih oknih, ki se lahko pojavijo v vrstici ali pa kot modalni, z nič več kot eno samo oznako HTML in nekaj vrsticami JavaScript.

Element dialoga odpravlja potrebo po izdelavi in ​​odpravljanju napak v pogovornem oknu po meri ali uvozu komponente nekoga drugega. Prav tako je zelo enostavno oblikovati s CSS.

Podpora brskalnika za element pogovornega okna

Na žalost bi lahko bila podpora brskalnika za element pogovornega okna boljša. Podprt je v najnovejših različicah vseh večjih brskalnikov od marca 2022, z nekaterimi opozorili.

Vsak brskalnik Firefox, starejši od Firefoxa 98, ga bo podpiral le, če je ročno omogočen v nastavitvah brskalnika, in katera koli različica Safarija, starejša od Safarija 15.4, ga sploh ne podpira. Celotne podrobnosti o podpori brskalnika so na voljo na caniuse.

Na srečo to ne pomeni, da je pogovorni element neuporaben. Skupina za Google Chrome vzdržuje polifil, na katerem lahko najdete Github za element pogovornega okna, ki zagotavlja podporo zanj tudi v brskalnikih, kjer ni izvorno podprt.

V trenutni obliki ima lahko element pogovornega okna težave z dostopnostjo, zato bi bilo morda bolj primerno uporabiti komponento pogovornega okna po meri, kot je a11y-dialog v proizvodnih aplikacijah.

Kako uporabljati element pogovornega okna

Če želite pokazati, kako uporabljati element pogovornega okna, ga boste uporabili za izdelavo skupne funkcije spletnega mesta: potrditvenega modalnega gumba za brisanje.

Vse, kar je potrebno za nadaljevanje, je ena sama datoteka HTML.

1. Nastavite datoteko HTML

Začnite tako, da ustvarite omenjeno datoteko in jo poimenujete index.html.

Nato vzpostavite strukturo datoteke HTML in zagotovite nekaj osnovnih metainformacij o strani, tako da se pravilno upodablja na vseh napravah.

V index.html vnesite naslednjo kodo:

<!DOCTYPE html>
<html lang="en">
<glavo>
<meta charset="UTF-8">
<meta http-equiv="Združljivo z X-UA" vsebina="IE = rob">
<meta ime="vidno polje" vsebina="širina = širina naprave, začetna lestvica = 1,0">
<naslov>Dialog demo</title>
</head>
<slogu></style>


<telo></body>
<skripta></script>
</html>

To je vse nastavitve, potrebne za ta projekt.

2. Pisanje oznake

Nato napišite oznako za gumb za brisanje in pogovorni element.

V oznako telesa index.html vnesite naslednjo kodo:

<div razred="vsebnik z gumbi">
<gumb>
Izbriši predmet
</button>
</div>
<pogovorno okno>
<razdel>
 Ali ste prepričani, da želite izbrisatito predmet?
</div>
<razdel>
<gumb razred ="blizu">
 da
</button>
<gumb razred ="blizu">
 št
</button>
</div>
</dialog>

Zgornji HTML bo ustvaril:

  • Gumb za brisanje.
  • Element dialoga.
  • Dva gumba v pogovornem oknu.

Če je v vašem brskalniku odprt index.html, bo edini element, viden na zaslonu, gumb za brisanje. To ne pomeni, da je kaj narobe, element pogovornega okna preprosto zahteva nekaj JavaScripta, da postane viden.

3. Dodajanje JavaScripta

Zdaj napišite kodo, ki bo odprla pogovorno okno, ko uporabnik klikne gumb za brisanje, in kodo, ki bo omogočila zapiranje pogovornega okna.

V skriptno oznako index.html vnesite naslednje:

konst modalni = dokument.querySelector("dialog")
document.querySelector("gumb .button-container").addEventListener("kliknite", () => {
modalni.showModal();
});
konst closeBtns = dokument.getElementsByClassName("zapri");
za (btn od closeBtns) {
 btn.addEventListener("kliknite", () => {
modalni.zapri();
 })
}

Ta koda uporablja metodo querySelector da dobite reference na gumbe in pogovorno okno. Nato vsakemu gumbu pripne poslušalec dogodkov klikov.

Morda ste seznanjeni z poslušalce dogodkov v JavaScriptu, ki jih lahko uporabite sami. Poslušalnik dogodkov, ki je priložen gumbu za brisanje, pokliče metodo showModal(), da prikaže pogovorno okno, ko kliknete gumb.

Vsak gumb v modalnem načinu ima priložen poslušalec dogodkov, ki uporablja metodo close(), da skrije pogovorno okno, ko jih kliknete.

Tudi če v kodi ni JavaScript, ki bi klical metodo close(), lahko uporabniki tudi zaprejo modal s pritiskom na tipko escape na tipkovnici.

Zdaj, ko je ta JavaScript na mestu, če uporabnik klikne gumb za brisanje, se bo modal odprl, s klikom na gumb da ali ne pa bo modal zaprl.

Tako naj bi izgledal odprt modal:

Omeniti je treba, da je element pogovornega okna že opremljen z nekaj slogov, čeprav v index.html ni CSS. Modal je že centriran, ima obrobo, širina je omejena na vsebino in ima nekaj privzetega oblazinjenja.

Uporabniki ne morejo komunicirati (klikniti, izbrati) z ničemer v ozadju, medtem ko je modal odprt.

Element pogovornega okna se lahko prikaže tudi kot del toka strani namesto kot modalni. Če ga želite preizkusiti, spremenite prvi poslušalec dogodkov v JavaScriptu tako:

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

Edina stvar, ki se je spremenila v tej kodi, je, da koda kliče metodo show() namesto metode showModal(). Zdaj, ko uporabnik klikne gumb za brisanje elementa, se mora modal odpreti v vrstici takole:

4. Dodaj Styling

Nato prilagodite videz pogovornega okna in njegovega ozadja tako, da napišete CSS.

CSS bo zmanjšal obrobo pogovornega okna, omejil njegovo največjo širino in nato zatemnil ozadje ter gumbom dodal malo stila.

Oblikovanje samega pogovornega okna je preprosto, vendar je psevdorazred za ozadje potreben za dodajanje sloga, ki cilja na ozadje pogovornega okna.

Prilepite naslednjo kodo v slogovno oznako index.html:

pogovorno okno:: ozadje {
 ozadje: črno;
motnost: 0.5;
}
gumb {
 radij obrobe: 2px;
 barva ozadja: bela;
 obroba: 1px polno črna;
 rob: 5px;
 box-shadow: 1px 1px 2px siva;
}
pogovorno okno {
 največja širina: 90vw;
 obroba: 1px polno črna;
}

Ko je pogovorno okno odprto, naj bi zdaj izgledalo takole:

In zgradili ste popolnoma funkcionalno pogovorno okno.

Element dialoga je odličen način za sestavljanje modalov

Z uporabo elementa pogovornega okna HTML, ki je pred kratkim dobil podporo v vseh večjih brskalnikih, lahko spletni razvijalci zdaj ustvarijo popolnoma funkcionalne, enostavno prilagodljivi modali in pogovorna okna z eno oznako HTML in nekaj vrsticami JavaScripta in ne da bi se morali zanašati na tretjo osebo rešitev.

Element pogovornega okna ima polifil, ki ga vzdržuje ekipa Google Chrome, ki razvijalcem omogoča uporabo pogovornega okna v različicah brskalnika, ki ga ne podpirajo.