Dialoger och modaler är integrerade delar av de flesta webbapplikationer. Även om det inte är en komplicerad uppgift att bygga dem för hand, är det en som snabbt blir tråkig för alla webbutvecklare. Det vanliga alternativet till att bygga dem för hand är att använda en komponent byggd av någon annan.

Det finns dock ett par problem med detta tillvägagångssätt. Det finns så många alternativ, det blir svårt att veta vilken komponent som skulle vara bäst att använda, och Att anpassa utseendet på sådana komponenter kan ibland vara lika tråkigt som att bygga en dialogruta för hand. Lyckligtvis finns det ett annat alternativ: HTML-dialogelementet.

Vad är dialogelementet?

HTML-dialogelementet är en inbyggd HTML-tagg (som div eller span), som låter utvecklare skapa anpassade dialoger och modaler. Dialogelementet har funnits i Chrome och Opera sedan 2014, men fick först nyligen stöd av alla större webbläsare.

Varför använda dialogelementet?

Den främsta anledningen till att använda dialogelementet är bekvämlighet. Det gör det enkelt att bygga dialogrutor som antingen kan visas inline eller visas som modaler, med inget mer än en enda HTML-tagg och några rader JavaScript.

instagram viewer

Dialogelementet tar bort behovet av att bygga och felsöka en anpassad dialogruta eller importera någon annans komponent. Det är också väldigt lätt att styla med CSS.

Webbläsarstöd för dialogelementet

Tyvärr kan webbläsarstödet för dialogelementet vara bättre. Det stöds i de senaste versionerna av alla större webbläsare från och med mars 2022, med vissa varningar.

Alla Firefox-webbläsare som är äldre än Firefox 98 kommer bara att stödja det om det är manuellt aktiverat i webbläsarinställningarna, och någon Safari-version tidigare än Safari 15.4 stöder det inte alls. Fullständig information om webbläsarsupport finns tillgänglig på kan jag använda.

Tack och lov betyder det inte att dialogelementet är oanvändbart. Google Chrome-teamet har en polyfill som du kan hitta på Github för dialogelementet som ger stöd för det även i webbläsare där det inte stöds inbyggt.

I sin nuvarande form kan dialogelementet ha tillgänglighetsproblem, så det kan vara lämpligare att använda en anpassad dialogkomponent som a11y-dialog i produktionsapplikationer.

Hur man använder dialogelementet

För att visa hur man använder dialogelementet kommer du att använda det för att bygga en gemensam webbplatsfunktion: en bekräftelsemodal för en raderingsknapp.

Allt som krävs för att följa med är en enda HTML-fil.

1. Konfigurera HTML-filen

Börja med att skapa nämnda fil och döpa den till index.html.

Fastställ sedan HTML-filens struktur och tillhandahåll lite grundläggande metainformation om sidan, så att den återges korrekt på alla enheter.

Skriv in följande kod i index.html:

<!DOCTYPE html>
<html lang="sv">
<huvud>
<meta teckenuppsättning="UTF-8">
<meta http-equiv="X-UA-kompatibel" innehåll="IE=kant">
<metanamn="utsiktsplats" innehåll="bredd=enhetsbredd, initialskala=1,0">
<titel>Dialog demo</title>
</head>
<stil></style>


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

Det är allt som behövs för det här projektet.

2. Skriver markeringen

Skriv sedan markeringen för raderingsknappen, såväl som dialogelementet.

Skriv följande kod i body-taggen för index.html:

<div klass="knapp-behållare">
<knapp>
Radera Artikel
</button>
</div>
<dialog>
<div>
 Är du säker på att du vill raderadetta Artikel?
</div>
<div>
<knappklass="stänga">
 Ja
</button>
<knappklass="stänga">
 Nej
</button>
</div>
</dialog>

HTML-koden ovan skapar:

  • En raderingsknapp.
  • Dialogelementet.
  • Två knappar i dialogrutan.

Om index.html är öppet i din webbläsare kommer det enda elementet som syns på skärmen att vara raderingsknappen. Detta betyder inte att det är något fel, dialogelementet kräver helt enkelt lite JavaScript för att bli synligt.

3. Lägger till JavaScript

Skriv nu koden som öppnar dialogrutan när en användare klickar på raderingsknappen, samt kod för att tillåta dialogrutan att stängas.

Skriv följande i skripttaggen för index.html:

konst modal = dokumentera.querySelector("dialog")
document.querySelector(".knapp-behållare-knapp").addEventListener("klick", () => {
modal.showModal();
});
konst closeBtns = dokumentera.getElementsByClassName("stäng");
för (btn of closeBtns) {
 btn.addEventListener("klick", () => {
modal.stänga();
 })
}

Denna kod använder metoden querySelector för att få referenser till knapparna och dialogrutan. Den bifogar sedan en klickhändelselyssnare till varje knapp.

Du kanske är bekant med händelseavlyssnare i JavaScript, som du kan använda själv. Händelseavlyssnaren kopplad till delete-knappen anropar metoden showModal() för att visa dialogrutan när knappen klickas.

Varje knapp inuti modalen har en händelseavlyssnare kopplad till den som använder metoden close() för att dölja dialogrutan när de klickas.

Även om det inte finns något JavaScript som anropar close()-metoden i koden, kan användare också stänga modalen genom att trycka på escape-tangenten på deras tangentbord.

Nu när detta JavaScript är på plats, om en användare klickar på raderingsknappen, öppnas modalen, och genom att klicka på ja eller nej-knappen stängs modalen.

Så här ska den öppnade modalen se ut:

En sak att notera är att dialogelementet redan har en viss stil, även om det inte finns någon CSS i index.html. Modalen är redan centrerad, den har en kant, bredden är begränsad till innehållet och den har viss standardutfyllnad.

Användare kan inte interagera (klicka, välja) med något i bakgrunden medan modalen är öppen.

Dialogelementet kan också visa sig själv som en del av sidans flöde istället för som en modal. För att prova det, ändra den första händelseavlyssnaren i JavaScript så här:

document.querySelector(".knapp-behållare-knapp").addEventListener("klick", () => { modal.show(); });

Det enda som har ändrats i den här koden är att koden anropar metoden show() istället för metoden showModal(). Nu, när en användare klickar på knappen Ta bort objekt, bör modalen öppnas inline så här:

4. Lägg till styling

Anpassa sedan utseendet på dialogrutan och dess bakgrund genom att skriva CSS.

CSS kommer att förminska dialogrutans ram, begränsa dess maximala bredd och sedan göra bakgrunden mörkare, samt lägga till lite stil till knapparna.

Att utforma själva dialogrutan är enkel, men bakgrunds-pseudoklassen är nödvändig för att lägga till stil som riktar sig mot bakgrunden i dialogrutan.

Klistra in följande kod i stiltaggen för index.html:

dialog:: bakgrund {
 bakgrund: svart;
opacitet: 0.5;
}
knapp {
 border-radie: 2px;
 bakgrundsfärg: vit;
 kant: 1px helt svart;
 marginal: 5px;
 box-shadow: 1px 1px 2px grå;
}
dialog {
 max-bredd: 90vw;
 kant: 1px helt svart;
}

När dialogrutan är öppen bör den nu se ut så här:

Och du har byggt en fullt fungerande dialogruta.

Dialogelementet är ett bra sätt att bygga modaler

Genom att använda HTML-dialogelementet som nyligen fick stöd i alla större webbläsare kan webbutvecklare nu bygga fullt fungerande, lätt anpassningsbara modaler och dialoger med en HTML-tagg och några rader JavaScript och utan att behöva förlita sig på en tredje part lösning.

Dialogelementet har en polyfill som underhålls av Google Chrome-teamet, som tillåter utvecklare att använda dialog i webbläsarversioner som inte stöder det.