Gå til sidens indhold
Det Fælles DesignsystemDevelop

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Modal

Modaler tvinger brugeren til at fokusere på og tage stilling til afgørende indhold, mens den øvrige side er deaktiveret.

Åbn dette eksempel i et nyt vindue: modal
Eksempel på modal

Sådan bruges komponenten

Anvendes til

Modaler anvendes til at tvinge brugerens fokus på et specifikt, afgrænset indhold, hvor den interaktive respons og forståelse er centralt for brugerens videre anvendelse af løsningen. Det kunne fx være en godkendelse af en handling, behov for bekræftelse eller overførsel af rettigheder, som løsningen skal kunne udføre for at kunne fuldføre sin dialog med brugeren.

Brug en modal, når du vil være sikker på, at brugeren ser en bestemt dialog og forholder sig til dens indhold.

Anvendes ikke til

En modal kan ikke erstatte individuelle sider i en selvbetjeningsløsning eller hjemmeside.

Modaler anvendes ikke til længere, sammenhængende indhold.

Modaler anvendes i begrænset omfang, da de kan øge løsningens kognitive load pga brugerens fokus flyttes.

Undgå modaler på mobile løsninger og visninger, da de ikke fungerer godt for brugeren.

Undgå at have formularer inde i en modal. Særligt hvis det er en formular med mere end ét felt. I sådan et tilfælde bør man overveje at dele siden op, så indholdet strækker sig over flere sider.

Vejledning

Undgå at have flere åbne modaler på siden - det giver en dårligere brugeroplevelse og kan resultere i at brugeren mister fornemmelsen af, hvor de er på siden.

Modalen skal have en meningsfuld overskrift, der klart relaterer sig til konteksten.

Knapper i modalen skal være tydelige og meningsfulde. Læs mere om knapper.

Vær sikker på at modalen kun akkurat passer til sit indhold og ikke dækker baggrunden (selve løsningen) fuldstændigt. Det er nødvendigt, at brugeren forstår, at de ikke har skiftet kontekst.

Brugeren skal selv aktivere modalen. Den må ikke aktiveres per automatik, da det kan have en modsatrettet effekt, hvor brugeren lukker det i affekt. Den eneste undtagelse er pattern for Session udløber, hvor modalen åbner af sig selv for at advare om en anden ændring i brugergrænsefladen, som brugeren ikke selv har aktiveret - nemlig automatisk log af.

Hold teksten i modalen så kort og koncis som muligt. Det anbefales ikke, at indholdet i modalen bliver så langt, at der opstår scroll. Overvej at bruge en individuel side i stedet for et modal, hvis indholdet er meget langt.

Varianter

Anvend modal som kræver handling, når brugeren ikke skal kunne lukke modalen uden at tage stilling til dets indhold.

Åbn dette eksempel i et nyt vindue: modal-forced-action
Eksempel på modal, som kræver handling
Gå til eksemplets kode: modal-forced-action

Se komponenten i eksempelløsninger

Se hvordan komponenten bruges i de forskellige eksempler på selvbetjeningsløsninger (tryk på ‘Kontakt’ i eksemplernes header)

Installation

HTML Struktur

Kodeeksempel
<div class="fds-modal" id="modal-example" aria-hidden="true" role="dialog" aria-modal="true"
    aria-labelledby="modal-example-heading">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title" id="modal-example-heading">
                Lorem ipsum
            </h2>
            <button class="modal-close function-link"
                data-modal-close><svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#close"></use></svg>Luk</button>
        </div>
        <div class="modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales
                turpis nec tincidunt dictum. Aliquam hendrerit nunc nec arcu lobortis
                fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.</p>
            <p>Cras eleifend elementum finibus. Mauris ac magna quis orci dapibus suscipit.
                Vestibulum accumsan turpis diam, ut pretium quam sollicitudin sed.
                Pellentesque posuere eget tortor quis imperdiet. Pellentesque gravida, enim
                vel porttitor sagittis, libero neque efficitur justo, nec gravida orci risus
                consequat lacus.</p>
        </div>

        <div class="modal-footer">
            <button class="button button-primary">
                Primær knap
            </button><button class="button button-secondary">
                Sekundær knap
            </button>
        </div>

    </div>
</div>

<button class="button button-secondary" data-module="modal" data-target="modal-example"
    aria-haspopup="dialog">
    Åbn modal
</button>

Modalen skal altid ligge i en div med klassen fds-modal-container, som skal ligge under body-elementet. Nedenstående boks viser et eksempel på strukturen:

<body>
    <div class="fds-modal-container">
        <div class="fds-modal" aria-hidden="true" role="dialog" aria-modal="true" ...>
          ...
        </div>
    </div>
</body>

JavaScript

Modal komponenten kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

let modal = new DKFDS.Modal(document.getElementById('MODAL-ID'));
modal.init();

Når en modal aktiveres, vil JavaScripten sætte inert-attributten på alle elementer under body bortset fra modalens container-element. Dette sikrer, at fokus bliver inde i modalen, når brugeren navigerer med et keyboard. Når modalen lukkes, fjernes attributten igen.

Funktioner

Funktion Beskrivelse
modal.show() Viser en modal
modal.hide() Skjuler en modal

Events

Event key Element Beskrivelse
fds.modal.hidden Modal element Når en modal skjules, bliver eventet fds.modal.hidden udløst på modal elementet
fds.modal.shown Modal element Når en modal vises, bliver eventet fds.modal.shown udløst på modal elementet
Vis dette eksempel i et nyt vindue: modal-forced-action
Kodeeksempel
<div class="fds-modal" id="modal-example-locked" aria-hidden="true" role="dialog"
    aria-modal="true" aria-labelledby="modal-example-locked-heading" data-modal-forced-action>
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title" id="modal-example-locked-heading">
                Lorem ipsum
            </h2>

        </div>
        <div class="modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales
                turpis nec tincidunt dictum. Aliquam hendrerit nunc nec arcu lobortis
                fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.</p>
            <p>Cras eleifend elementum finibus. Mauris ac magna quis orci dapibus suscipit.
                Vestibulum accumsan turpis diam, ut pretium quam sollicitudin sed.
                Pellentesque posuere eget tortor quis imperdiet. Pellentesque gravida, enim
                vel porttitor sagittis, libero neque efficitur justo, nec gravida orci risus
                consequat lacus.</p>
        </div>

        <div class="modal-footer">
            <button class="button button-primary" id="button-modal-example-yes">
                Primær knap
            </button><button class="button button-secondary" id="button-modal-example-no">
                Sekundær knap
            </button>
        </div>

    </div>
</div>

<button class="button button-secondary" data-module="modal" data-target="modal-example-locked"
    aria-haspopup="dialog">
    Åbn modal
</button>
Gå til eksemplets retningslinjer

Tilføj attributten data-modal-forced-action for at deaktivere luk funktioner som escape. Bemærk, at eksemplet også undlader luk knappen øverst i modalen. Man skal huske at tilføre luk funktionalitet i knapperne tilføjet i modalen.

Om custom elements

Eksempler

Åbn i et nyt vindue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales turpis nec tincidunt dictum. Aliquam hendrerit nunc nec arcu lobortis fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.

Cras eleifend elementum finibus. Mauris ac magna quis orci dapibus suscipit. Vestibulum accumsan turpis diam, ut pretium quam sollicitudin sed. Pellentesque posuere eget tortor quis imperdiet. Pellentesque gravida, enim vel porttitor sagittis, libero neque efficitur justo, nec gravida orci risus consequat lacus.

 
<fds-modal-opener modal-id="simple-modal-example">
    <button class="button button-secondary">Åbn modal</button>
</fds-modal-opener>
<fds-modal id="simple-modal-example" heading="Lorem ipsum" heading-id="simple-modal-example-heading">
    <dialog>
        <div class="scrollable-area">
            <div class="modal-top"></div>
            <p class="mt-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales turpis nec tincidunt dictum. Aliquam hendrerit
                nunc nec arcu
                lobortis fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.</p>
            <p>Cras eleifend elementum finibus. Mauris ac magna quis orci dapibus suscipit. Vestibulum accumsan turpis diam, ut pretium quam
                sollicitudin sed. Pellentesque posuere eget tortor quis imperdiet. Pellentesque gravida, enim vel porttitor sagittis, libero neque
                efficitur justo, nec gravida orci risus consequat lacus.</p>
            <div class="button-group">
                <fds-modal-closer class="button-wrapper">
                    <button class="button button-primary" type="button">Primær knap</button>
                </fds-modal-closer>
                <fds-modal-closer class="button-wrapper">
                    <button class="button button-secondary" type="button">Sekundær knap</button>
                </fds-modal-closer>
            </div>
        </div>
    </dialog>
</fds-modal>

Bemærk, at der altid kun bør være én åben modal ad gangen. Har man brug for at åbne to modaler efter hinanden, skal forrige modal lukkes, før den nye åbnes.

Varianter

Modal som kræver handling

Modaler, som kræver handling, kan ikke lukkes med Escape-tasten eller ved klik på baggrunden. Undlad at sætte en luk-knap i øverste højre hjørne og brug kun fds-modal-closer på de knapper, som kan bruges til at foretage et valg.

Åbn i et nyt vindue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales turpis nec tincidunt dictum. Aliquam hendrerit nunc nec arcu lobortis fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.

Cras eleifend elementum finibus. Mauris ac magna quis orci dapibus suscipit. Vestibulum accumsan turpis diam, ut pretium quam sollicitudin sed. Pellentesque posuere eget tortor quis imperdiet. Pellentesque gravida, enim vel porttitor sagittis, libero neque efficitur justo, nec gravida orci risus consequat lacus.

 
<fds-modal-opener modal-id="not-dismissble-example">
    <button class="button button-secondary">Åbn modal</button>
</fds-modal-opener>
<fds-modal id="not-dismissble-example" heading="Lorem ipsum" heading-id="not-dismissble-example-heading" dismissible="false">
    <dialog>
        <div class="scrollable-area">
            <div class="modal-top"></div>
            <p class="mt-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales turpis nec tincidunt dictum. Aliquam hendrerit nunc nec arcu
                lobortis fringilla. Sed nulla lectus, mollis eget rhoncus sed, porta eu ipsum.</p>
            <p>Cras eleifend elementum finibus. Mauris ac magna quis orci dapibus suscipit. Vestibulum accumsan turpis diam, ut pretium quam
                sollicitudin sed. Pellentesque posuere eget tortor quis imperdiet. Pellentesque gravida, enim vel porttitor sagittis, libero neque
                efficitur justo, nec gravida orci risus consequat lacus.</p>
            <div class="button-group">
                <fds-modal-closer class="button-wrapper">
                    <button class="button button-primary" type="button">Primær knap</button>
                </fds-modal-closer>
                <fds-modal-closer class="button-wrapper">
                    <button class="button button-secondary" type="button">Sekundær knap</button>
                </fds-modal-closer>
            </div>
        </div>
    </dialog>
</fds-modal>

Implementeringen af attributten dismissible sætter både attributten closedby og en event listener for cancel grundet forskellig browsersupport og -opførsel (HTML Living Standard).

Konfiguration

fds-modal

Attributter

Attribut Beskrivelse
dismissible Hvis attributten er sat, er det ikke muligt at lukke modalen ved at trykke på baggrunden, bruge tilbage-knappen på mobiler eller trykke på Escape.
bottom-sheet Åben modalen med en animation fra bunden af skærmen. Bruges primært til trinindikator.
ready Kan bruges til at udskyde automatisk initialisering. Sæt ready=”false” for at forhindre initialisering ved tilføjelse til DOM’en, og fjern attributten eller sæt ready=”true” for at initialisere komponenten.

Referencer

aria-labelledby i dialog: https://www.w3.org/WAI/WCAG22/Techniques/html/H102

HTML Living Standard, 6.10.3 The CloseWatcher interface, cancel-eksempel: https://html.spec.whatwg.org/#example-CloseWatcher-cancel

https://issues.chromium.org/issues/351867704

Vi indsamler statistik ved hjælp af tredjepartscookies til at forbedre brugeroplevelsen.

Alle indsamlede data anonymiseres.

Læs mere om vores brug af cookies