Dialoger og modaler er integrerede dele af de fleste webapplikationer. Selvom det ikke er en kompleks opgave at bygge dem i hånden, er det en, der hurtigt bliver trættende for enhver webudvikler. Det sædvanlige alternativ til at bygge dem i hånden er at bruge en komponent bygget af en anden.

Der er dog et par problemer med denne tilgang. Der er så mange muligheder, at det bliver svært at vide, hvilken komponent der ville være bedst at bruge, og at tilpasse udseendet af sådanne komponenter kan nogle gange være lige så kedeligt som at bygge en dialog med hånden. Heldigvis er der et andet alternativ: HTML-dialogelementet.

Hvad er dialogelementet?

HTML-dialogelementet er et indbygget HTML-tag (som div eller span), der giver udviklere mulighed for at oprette brugerdefinerede dialoger og modaler. Dialogelementet har eksisteret i Chrome og Opera siden 2014, men blev først for nylig understøttet af alle større browsere.

Hvorfor bruge dialogelementet?

Den primære grund til at bruge dialogelementet er bekvemmelighed. Det gør det nemt at bygge dialoger, der enten kan vises inline eller vises som modaler, med intet mere end et enkelt HTML-tag og et par linjer JavaScript.

instagram viewer

Dialogelementet fjerner behovet for at bygge og fejlfinde en brugerdefineret dialogboks eller importere en andens komponent. Det er også meget nemt at style med CSS.

Browserstøtte til dialogelementet

Desværre kunne browserunderstøttelse af dialogelementet være bedre. Det er understøttet i de nyeste versioner af alle større browsere fra marts 2022, med nogle forbehold.

Enhver Firefox-browser, der er ældre end Firefox 98, understøtter den kun, hvis den er aktiveret manuelt i browserindstillingerne, og enhver Safari-version tidligere end Safari 15.4 understøtter det slet ikke. Fuld browsersupportoplysninger er tilgængelige på kan jeg bruge.

Heldigvis betyder dette ikke, at dialogelementet er ubrugeligt. Google Chrome-teamet vedligeholder en polyfill, du kan finde på Github for dialogelementet, der understøtter det selv på browsere, hvor det ikke er naturligt understøttet.

I sin nuværende form kan dialogelementet have tilgængelighedsproblemer, så det kan være mere egnet at bruge en tilpasset dialogkomponent som f.eks. a11y-dialog i produktionsapplikationer.

Sådan bruges dialogelementet

For at demonstrere, hvordan du bruger dialogelementet, skal du bruge det til at bygge en fælles hjemmesidefunktion: en bekræftelsesmodal for en sletknap.

Det eneste, der kræves for at følge med, er en enkelt HTML-fil.

1. Opsæt HTML-filen

Start med at oprette den nævnte fil og navngive den index.html.

Derefter skal du etablere HTML-filens struktur og give nogle grundlæggende metaoplysninger om siden, så den gengives korrekt på alle enheder.

Indtast følgende kode i index.html:

<!DOCTYPE html>
<html lang="da">
<hoved>
<meta-tegnsæt="UTF-8">
<meta http-equiv="X-UA-kompatibel" indhold="IE=kant">
<metanavn="viewport" indhold="bredde=enhedsbredde, indledende skala=1,0">
<titel>Dialog demo</title>
</head>
<stil></style>


<legeme></body>
<manuskript></script>
</html>

Det er alt det nødvendige opsætning til dette projekt.

2. Skrivning af Markup

Dernæst skal du skrive markeringen for sletknappen samt dialogelementet.

Indtast følgende kode i body-tagget for index.html:

<div klasse="knap-beholder">
<knap>
Slet vare
</button>
</div>
<dialog>
<div>
 Er du sikker på, at du vil slettedette vare?
</div>
<div>
<knapklasse="tæt">
 Ja
</button>
<knapklasse="tæt">
 Ingen
</button>
</div>
</dialog>

HTML-koden ovenfor vil skabe:

  • En slet knap.
  • Dialogelementet.
  • To knapper inde i dialogen.

Hvis index.html er åben i din browser, vil det eneste element, der er synligt på skærmen, være slet-knappen. Dette betyder ikke, at der er noget galt, dialogelementet kræver blot en smule JavaScript for at blive synligt.

3. Tilføjelse af JavaScript

Skriv nu koden, der åbner dialogen, når en bruger klikker på sletknappen, samt kode for at tillade dialogen at lukke.

Indtast følgende i script-tagget for index.html:

konst modal = dokument.querySelector("dialog")
document.querySelector(".knap-beholder-knap").addEventListener("klik", () => {
modal.showModal();
});
konst closeBtns = dokument.getElementsByClassName("close");
for (btn af closeBtns) {
 btn.addEventListener("klik", () => {
modal.tæt();
 })
}

Denne kode bruger metoden querySelector for at få referencer til knapperne og dialogen. Den knytter derefter en klikhændelseslytter til hver knap.

Du er måske bekendt med begivenhedslyttere i JavaScript, som du selv kan bruge. Hændelseslytteren, der er knyttet til slet-knappen, kalder showModal()-metoden for at vise dialogen, når der klikkes på knappen.

Hver knap inde i modalen har en hændelseslytter knyttet til sig, som bruger close() metoden til at skjule dialogen, når der klikkes på dem.

Selvom der ikke er noget JavaScript, der kalder close()-metoden i koden, kan brugere også lukke modalen ved at trykke på escape-tasten på deres tastatur.

Nu hvor dette JavaScript er på plads, vil modalen åbnes, hvis en bruger klikker på sletknappen, og ved at klikke på ja eller nej-knappen lukkes modalen.

Sådan skal den åbnede modal se ud:

En ting at bemærke er, at dialogelementet allerede kommer med en vis styling, selvom der ikke er nogen CSS i index.html. Modalen er allerede centreret, den har en kant, bredden er begrænset til indholdet, og den har en vis standardpolstring.

Brugere kan ikke interagere (klik, vælg) med noget i baggrunden, mens modalen er åben.

Dialogelementet kan også vise sig selv som en del af sidens flow i stedet for som en modal. For at prøve det, skal du ændre den første begivenhedslytter i JavaScript sådan:

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

Det eneste, der har ændret sig i denne kode, er, at koden kalder show()-metoden i stedet for showModal()-metoden. Nu, når en bruger klikker på knappen slet element, skal modalen åbne inline sådan her:

4. Tilføj styling

Tilpas derefter udseendet af dialogboksen og dens baggrund ved at skrive CSS.

CSS vil reducere grænsen af ​​dialogboksen, begrænse dens maksimale bredde og derefter gøre baggrunden mørkere, samt tilføje lidt styling til knapperne.

At style selve dialogboksen er ligetil, men baggrunds-pseudoklassen er nødvendig for at tilføje stil, der er målrettet mod dialogens baggrund.

Indsæt følgende kode i stiltagget for index.html:

dialog:: baggrund {
 baggrund: sort;
Gennemsigtighed: 0.5;
}
knap {
 kant-radius: 2px;
 baggrundsfarve: hvid;
 kant: 1px ensfarvet sort;
 margen: 5px;
 box-shadow: 1px 1px 2px grå;
}
dialog {
 max-bredde: 90vw;
 kant: 1px ensfarvet sort;
}

Når dialogen er åben, skulle den nu se sådan ud:

Og du har bygget en fuldt funktionel dialogboks.

Dialogelementet er en fantastisk måde at bygge modaler på

Ved at bruge HTML-dialogelementet, der for nylig fik støtte i alle større browsere, kan webudviklere nu bygge fuldt funktionelle, let tilpasselige modaler og dialogbokse med ét HTML-tag og et par linjer JavaScript og uden at skulle stole på en tredjepart løsning.

Dialogelementet har en polyfill, der vedligeholdes af Google Chrome-teamet, som giver udviklere mulighed for at bruge dialog i browserversioner, der ikke understøtter det.