IT-lexikon › Web › <dialog>-element

<dialog>-element

Web In English → Uppdaterad: 2026-05-30

Ett inbyggt HTML-element för modaler och dialogrutor. <dialog> med showModal() ger gratis det som tidigare krävde mycket JavaScript: bakgrundsöverlägg, fokusfälla, Esc-stängning, och korrekt tillgänglighet — allt enligt standard.

Vad man slipper bygga själv: en äkta modal kräver att fokus fångas inuti (tab ska inte ta dig ut), att bakgrunden blockeras (::backdrop), att Esc stänger, att fokus återgår dit det var, och rätt ARIA-roller för skärmläsare — historiskt en vanlig källa till buggiga, otillgängliga egenbyggen. <dialog>.showModal() ger allt detta inbyggt och korrekt; show() ger en icke-modal variant. Den renderas i webbläsarens "top layer" (ovanför allt annat, oberoende av z-index och overflow). Kombineras väl med Popover API (för icke-modala popups) och anchor positioning. Stöds brett sedan 2022. Ett tydligt exempel på plattformen som tar tillbaka mark från bibliotek. Hör ihop med popover och focus trap.

← Tillbaka till lexikonet