Dialoger og modaler er integrerte deler av de fleste nettapplikasjoner. Selv om det ikke er en kompleks oppgave å bygge dem for hånd, er det en som raskt blir kjedelig for enhver nettutvikler. Det vanlige alternativet til å bygge dem for hånd er å bruke en komponent bygget av noen andre.

Det er imidlertid et par problemer med denne tilnærmingen. Det er så mange alternativer, det blir vanskelig å vite hvilken komponent som er best å bruke, og Å tilpasse utseendet til slike komponenter kan noen ganger være like kjedelig som å bygge en dialog for hånd. Heldigvis finnes det et annet alternativ: HTML-dialogelementet.

Hva er dialogelementet?

HTML-dialogelementet er en innebygd HTML-tag (som div eller span), som lar utviklere lage tilpassede dialoger og modaler. Dialogelementet har eksistert i Chrome og Opera siden 2014, men ble nylig støttet av alle større nettlesere.

Hvorfor bruke dialogelementet?

Den primære grunnen til å bruke dialogelementet er bekvemmelighet. Det gjør det enkelt å bygge dialoger som enten kan vises inline eller vises som modaler, med ingenting mer enn en enkelt HTML-tag og noen få linjer med JavaScript.

instagram viewer

Dialogelementet fjerner behovet for å bygge og feilsøke en egendefinert dialog, eller importere en annens komponent. Det er også veldig enkelt å style med CSS.

Nettleserstøtte for dialogelementet

Dessverre kan nettleserstøtten for dialogelementet være bedre. Den støttes i de nyeste versjonene av alle større nettlesere fra mars 2022, med noen forbehold.

Alle Firefox-nettlesere som er eldre enn Firefox 98 vil bare støtte den hvis den er manuelt aktivert i nettleserinnstillingene, og enhver Safari-versjon tidligere enn Safari 15.4 støtter den ikke i det hele tatt. Fullstendig nettleserstøttedetaljer er tilgjengelig på kan jeg bruke.

Heldigvis betyr ikke dette at dialogelementet er ubrukelig. Google Chrome-teamet vedlikeholder en polyfill du kan finne på Github for dialogelementet som gir støtte for det selv på nettlesere der det ikke er naturlig støttet.

I sin nåværende form kan dialogelementet ha tilgjengelighetsproblemer, så det kan være mer egnet å bruke en tilpasset dialogkomponent som a11y-dialog i produksjonsapplikasjoner.

Hvordan bruke dialogelementet

For å demonstrere hvordan du bruker dialogelementet, vil du bruke det til å bygge en felles nettsidefunksjon: en bekreftelsesmodal for en sletteknapp.

Alt som kreves for å følge med er en enkelt HTML-fil.

1. Sett opp HTML-filen

Start med å lage nevnte fil og gi den et navn index.html.

Deretter etablerer du strukturen til HTML-filen og gir litt grunnleggende metainformasjon om siden, slik at den gjengis riktig på alle enheter.

Skriv inn følgende kode i index.html:

<!DOCTYPE html>
<html lang="no">
<hode>
<metategnsett="UTF-8">
<meta http-equiv="X-UA-kompatibel" innhold="IE = kant">
<metanavn="viewport" innhold="width=enhetsbredde, initial-skala=1,0">
<tittel>Dialog demo</title>
</head>
<stil></style>


<kropp></body>
<manus></script>
</html>

Det er alt oppsettet som er nødvendig for dette prosjektet.

2. Skrive markeringen

Deretter skriver du markeringen for sletteknappen, samt dialogelementet.

Skriv inn følgende kode i body-taggen til index.html:

<div klasse="knapp-beholder">
<knapp>
Slett punkt
</button>
</div>
<dialog>
<div>
 Er du sikker på at du vil slettedette punkt?
</div>
<div>
<knappeklasse="Lukk">
 Ja
</button>
<knappeklasse="Lukk">
 Nei
</button>
</div>
</dialog>

HTML-en ovenfor vil lage:

  • En sletteknapp.
  • Dialogelementet.
  • To knapper inne i dialogboksen.

Hvis index.html er åpen i nettleseren din, vil det eneste elementet som er synlig på skjermen være sletteknappen. Dette betyr ikke at det er noe galt, dialogelementet krever ganske enkelt litt JavaScript for å bli synlig.

3. Legger til JavaScript

Skriv nå koden som åpner dialogen når en bruker klikker på sletteknappen, samt koden for å la dialogboksen lukkes.

Skriv inn følgende i skriptkoden til index.html:

konst modal = dokument.querySelector("dialog")
document.querySelector(".knapp-beholder-knapp").addEventListener("klikk", () => {
modal.showModal();
});
konst closeBtns = dokument.getElementsByClassName("lukke");
for (btn of closeBtns) {
 btn.addEventListener("klikk", () => {
modal.Lukk();
 })
}

Denne koden bruker querySelector-metoden for å få referanser til knappene og dialogen. Den knytter deretter en klikkhendelseslytter til hver knapp.

Du er kanskje kjent med hendelseslyttere i JavaScript, som du kan bruke selv. Hendelseslytteren knyttet til sletteknappen kaller showModal()-metoden for å vise dialogen når knappen klikkes.

Hver knapp inne i modalen har en hendelseslytter knyttet til seg som bruker close()-metoden for å skjule dialogen når de klikkes.

Selv om det ikke er noe JavaScript som kaller close()-metoden i koden, kan brukere også lukke modalen ved å trykke på escape-tasten på tastaturet.

Nå som dette JavaScript er på plass, hvis en bruker klikker på sletteknappen, åpnes modalen, og ved å klikke på ja eller nei-knappen lukkes modalen.

Slik skal den åpnede modalen se ut:

En ting å merke seg er at dialogelementet allerede kommer med litt styling, selv om det ikke er noen CSS i index.html. Modalen er allerede sentrert, den har en kantlinje, bredden er begrenset til innholdet, og den har en viss standardpolstring.

Brukere kan ikke samhandle (klikke, velge) med noe i bakgrunnen mens modalen er åpen.

Dialogelementet kan også vise seg selv som en del av flyten på siden i stedet for som en modal. For å prøve det, endre den første hendelseslytteren i JavaScript slik:

document.querySelector(".knapp-beholder-knapp").addEventListener("klikk", () => { modal.show(); });

Det eneste som har endret seg i denne koden er at koden kaller show()-metoden, i stedet for showModal()-metoden. Nå, når en bruker klikker på Slett element-knappen, skal modalen åpne inline slik:

4. Legg til styling

Tilpass deretter utseendet til dialogboksen og bakgrunnen ved å skrive CSS.

CSS-en vil redusere rammen til dialogboksen, begrense dens maksimale bredde, og deretter gjøre bakgrunnen mørkere, samt legge til litt styling til knappene.

Å style selve dialogboksen er enkel, men bakgrunns-pseudoklassen er nødvendig for å legge til stil som retter seg mot bakgrunnen til dialogen.

Lim inn følgende kode i stilkoden til index.html:

dialog:: bakteppe {
 bakgrunn: svart;
opasitet: 0.5;
}
knapp {
 border-radius: 2px;
 bakgrunnsfarge: hvit;
 kantlinje: 1px helt svart;
 margin: 5px;
 box-shadow: 1px 1px 2px grå;
}
dialog {
 maks-bredde: 90vw;
 kantlinje: 1px helt svart;
}

Når dialogboksen er åpen, skal den nå se slik ut:

Og du har bygget en fullt funksjonell dialogboks.

Dialogelementet er en flott måte å bygge modaler på

Ved å bruke HTML-dialogelementet som nylig har fått støtte i alle større nettlesere, kan webutviklere nå bygge fullt funksjonelle, enkelt tilpassbare modaler og dialoger med én HTML-tag og noen få linjer med JavaScript og uten å måtte stole på en tredjepart løsning.

Dialogelementet har en polyfill vedlikeholdt av Google Chrome-teamet, som lar utviklere bruke dialog i nettleserversjoner som ikke støtter det.