<lm-dialog> – Dialog / Dialog

Om komponenten

Kanonisk navn: <lm-dialog>
Synonymer: modal, modal dialog, popup-vindu
Kategori: overlegg
ARIA-mønster: Dialog (Modal)
Parts: dialog, tittel, innhold, knapperad, knapp-lukk
Native-first-vurdering: Bygger direkte på native <dialog> og showModal(), som allerede gir fokusfangst, Escape-lukking, ::backdrop og riktig role="dialog"-semantikk. Komponenten legger kun til en standardisert tittel/knapperad-struktur og --apne-kommando-mønsteret slik at ingen JS trengs av forbrukeren for å åpne den (se detaljer).
Nettleserstøtte: Bruker closedby-attributtet på <dialog> og Invoker Commands (command/commandfor) - begge er nyere plattform-API-er som kun kreves å fungere i nyeste Chrome/Safari, i tråd med resten av designsystemet.
Design-tokens: var(--color-surface, ...), var(--color-surface-text, ...), var(--color-surface-muted, ...), var(--space-xs, ...), var(--space-small, ...), var(--space-medium, ...), var(--space-large, ...), var(--radius-small, ...), var(--radius-large, ...), var(--shadow-medium, ...), var(--transition-duration, ...), var(--border-width, ...)
Sist endret: 20. september 2026
Brukt: Ikke i bruk andre steder ennå

Formål

Generisk modal dialog for innhold som ikke passer de mer spesialiserte dialogene i designsystemet - f.eks. et redigeringsskjema, en utvidet informasjonsvisning, eller flere handlingsknapper. Wrapper en ekte <dialog> og implementerer ARIA APG sitt Dialog (Modal)-mønster: fokus fanges inni dialogen, Escape lukker den, og fokus returneres til utløser-elementet ved lukking (alt native <dialog>-oppførsel).

Egner seg for

Redigeringsskjemaer, utvidet informasjon, eller flere handlinger som skal vises over resten av siden.
Tilfeller der <lm-confirm-dialog> (bekreftelse) eller <lm-preview-image>/<lm-preview-document> (medieforhåndsvisning) ikke passer.

Egner seg ikke for

Bekreftelse før en destruktiv/uigjenkallelig handling - bruk <lm-confirm-dialog> i stedet, som har riktig role="alertdialog".
Forhåndsvisning av bilder/dokumenter - bruk <lm-preview-image>/<lm-preview-document>.
Korte, ikke-blokkerende varsler - bruk <lm-toast> i stedet for en modal dialog.

Bruk

<script type="module" src="/designsystem/komponenter/overlegg/dialog/dialog.js"></script>

<button type="button" command="--apne" commandfor="rediger-dialog">Rediger transaksjon</button>

<lm-dialog id="rediger-dialog" tittel="Rediger transaksjon">
    <form id="rediger-skjema">
        <label>Beløp <input type="number" required></label>
    </form>
    <button slot="handlinger" type="submit" form="rediger-skjema">Lagre</button>
</lm-dialog>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`tittel`	`string`	""	Overskriften (<h2>) i dialogen.
`lukk-tekst`	`string`	"Lukk"	Teksten på den innebygde lukk-knappen.

Slots

Slot	Beskrivelse
(standard)	Selve dialoginnholdet (fri markup - skjema, tekst, lister).
`handlinger`	Valgfrie ekstra handlingsknapper (f.eks. "Lagre") vist ved siden av den innebygde lukk-knappen.

Parts

Part	Beskrivelse
`dialog`	Selve `<dialog>`-elementet.
`tittel`	Overskriften.
`innhold`	Wrapperen rundt standard-sloten.
`knapperad`	Wrapperen rundt handlinger-sloten og lukk-knappen.
`knapp-lukk`	Den innebygde lukk-knappen.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-dialog::part(dialog) {
    /* egne stiler for "Selve `<dialog>`-elementet." */
}

lm-dialog::part(tittel) {
    /* egne stiler for "Overskriften." */
}

lm-dialog::part(innhold) {
    /* egne stiler for "Wrapperen rundt standard-sloten." */
}

lm-dialog::part(knapperad) {
    /* egne stiler for "Wrapperen rundt handlinger-sloten og lukk-knappen." */
}

lm-dialog::part(knapp-lukk) {
    /* egne stiler for "Den innebygde lukk-knappen." */
}

Metoder

Metode	Parametre	Returverdi	Beskrivelse
`showModal()`	-		Åpner dialogen programmatisk - samme effekt som en `command="--apne"`-knapp utenfra.
`close()`	-		Lukker dialogen programmatisk.

Tilgjengelighet

Native <dialog role="dialog"> gir fokusfangst og Escape-lukking automatisk. aria-labelledby peker til tittelen. closedby="any" tillater også lys-utenfor-klikk for å lukke, i tillegg til Escape og lukk-knappen.

role="dialog" (ikke "alertdialog" - dette er ikke en bekreftelse/varsel) med aria-labelledby mot tittelen.
Native <dialog>-fokusfangst holder tastaturfokus inni dialogen mens den er åpen, og returnerer det til elementet som åpnet den ved lukking.
Escape og closedby="any"s lys-utenfor-klikk lukker dialogen i tillegg til den innebygde lukk-knappen.

Detaljer

Åpnes med en vanlig knapp utenfra via command="--apne" commandfor="<id>" - en egendefinert kommando (prefikset --), siden native show-modal kun dispatches når commandfor-målet selv er et ekte <dialog>/popover-element, ikke en custom-element-wrapper som <lm-dialog>. Se <lm-confirm-dialog> sin kildekode for samme begrunnelse i detalj.
Den innebygde lukk-knappen bruker command="close" commandfor="dialog" mot den interne <dialog>-en i skygge-DOM-en, og fungerer derfor helt uten egen JS.

Referanser

Se også:

../../tilbakemelding/confirm-dialog/index.html - brukes i stedet for bekreftelse før en destruktiv handling.
../../medieinnhold/preview-image/index.html - brukes i stedet for bildeforhåndsvisning.
../../../guider/overlegg/index.html - Full oversikt over når du velger en modal <dialog> fremfor et popover for meny, varsel eller verktøytips.
../../../guider/animasjon-og-bevegelse/index.html - Forklarer hvorfor åpning/lukking animeres med transform/opacity, ikke layout-egenskaper.

Avhengigheter: Ingen