Modal

Komponenter

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

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.

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

<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

<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.

Web Component-koden er i beta

Læs mere om Web Components i beta-version. Hvis du har forslag til forbedringer eller kommentarer, kan du oprette et issue på GitHub eller sende en e-mail til FDS-teamet.

Åbn eksempel i nyt vindue

                    Web Component
                    Genereret HTML

                    
                        
                            <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>
                        
                    
                    
                        
                            <fds-modal-opener modal-id="simple-modal-example">
    <button class="button button-secondary" aria-haspopup="dialog">Åbn modal</button>
</fds-modal-opener>
<fds-modal id="simple-modal-example" heading="Lorem ipsum" heading-id="simple-modal-example-heading">
    <dialog aria-labelledby="simple-modal-example-heading">
        <div class="scrollable-area">
            <div class="modal-top">
                <h2 class="top-heading" tabindex="-1" id="simple-modal-example-heading">Lorem ipsum</h2>
                <fds-modal-closer class="modal-close">
                    <button class="function-link" type="button">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                            <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"></path>
                        </svg>
                        <span>Luk</span>
                    </button>
                </fds-modal-closer>
            </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>
                        
                    
                
                    
                

Om denne komponent

Denne komponent anvender light DOM. Det betyder, at komponenten genererer HTML, der kan tilgås ligesom al anden HTML på siden. Du kan som udvikler vælge mellem at tage Web Component-koden, hvis du vil lade komponenten generere HTML’en, eller tage versionen med den genererede kode, hvis du har brug for at ændre i HTML’en først. Begge muligheder vises i fanebladene i komponentens eksempler.

Uanset hvilken kode du tager, vil komponenten stadig aktivere den nødvendige JavaScript. Bemærk, at udvalgte light DOM-komponenter har en ready-attribut, du som udvikler kan bruge, hvis du i dit framework har behov for at udskyde initialisering af komponenten.

Læs mere på Web Components i beta-version om komponenternes anvendelse af light DOM og shadow DOM samt vores ønsker til feedback.

Varianter

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 eksempel i nyt vindue

                    Web Component
                    Genereret HTML

                    
                        
                            <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>
                        
                    
                    
                        
                            <fds-modal-opener modal-id="not-dismissble-example">
    <button class="button button-secondary" aria-haspopup="dialog">Åbn modal</button>
</fds-modal-opener>
<fds-modal id="not-dismissble-example" heading="Lorem ipsum" heading-id="not-dismissble-example-heading" dismissible="false">
    <dialog aria-labelledby="not-dismissble-example-heading" closedby="none">
        <div class="scrollable-area">
            <div class="modal-top">
                <h2 class="top-heading" tabindex="-1" id="not-dismissble-example-heading">Lorem ipsum</h2>
            </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: Attributten dismissible sætter både attributten closedby og en event listener for cancel grundet forskellig browsersupport og -opførsel (HTML Living Standard).

Konfiguration

Bemærk, at modalkomponenten som standard altid kræver et <dialog>-element direkte efterfulgt af <div class="scrollable-area">, der indeholder en tom <div class="modal-top"></div> samt modalens øvrige indhold. Komponenten genererer ikke denne struktur selv, da strukturen afviger afhængigt af variant-attributten.

Attributter

Attribut	Beskrivelse
ready	Sæt til `"false"` for at udskyde initialisering af komponenten. Udelad attributten, eller sæt den til andet end `"false"`, for at initialisere komponenten med det samme.
heading	Sæt modalens overskrift. Hvis overskriften ikke allerede findes i markup’en, genereres den automatisk.
heading-id	Sæt ID for overskriftselementet. Bruges til at knytte overskriften til dialogen via `aria-labelledby`. Standardværdien er tilfældigt genereret.
dismissible	Sæt til `false` for at forhindre, at modalen lukkes ved klik på baggrunden, med tilbage-knappen på mobiler eller med Escape. Default er `true`.
variant	Sæt modalens visningstype. Gyldige værdier er `default`, `bottom-sheet` og `drawer`. Default er `default`.
close-text	Sæt teksten på luk-knappen, når den genereres automatisk. Default er `Luk`.

bottom-sheet er dokumenteret under trinindikator, og drawer er dokumenteret under header.

Funktioner

Funktion	Beskrivelse
open()	Åbn modalen.
close(returnValue)	Luk modalen. `returnValue` er valgfri og sættes som dialogens `returnValue`.

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.

Events

Event	Beskrivelse
fds-modal-open	Udløses når modalen åbnes.
fds-modal-close	Udløses når modalen lukkes. `event.detail.returnValue` indeholder dialogens returværdi.

Attributter

Attribut	Beskrivelse
modal-id	Sæt ID’et på den `fds-modal`, der skal åbnes.
ready	Sæt til `"false"` for at udskyde initialisering af komponenten. Udelad attributten, eller sæt den til andet end `"false"`, for at initialisere komponenten med det samme.

Events

Event	Beskrivelse
fds-modal-opener-click	Udløses når der klikkes på elementet i `fds-modal-opener`. `event.detail.modalId` indeholder ID’et på den modal, der åbnes.

Attributter

Attribut	Beskrivelse
return-value	Sæt den returværdi, dialogen skal have, når den lukkes via dette element.
ready	Sæt til `"false"` for at udskyde initialisering af komponenten. Udelad attributten, eller sæt den til andet end `"false"`, for at initialisere komponenten med det samme.

Events

Event	Beskrivelse
fds-modal-closer-click	Udløses når der klikkes på elementet i `fds-modal-closer`. `event.detail.returnValue` indeholder den angivne returværdi.

Referencer

HTML Living Standard, 6.10.3 The CloseWatcher interface, cancel-eksempel

Web Components i beta-version

Sådan bruges komponenten

Anvendes til

Anvendes ikke til

Vejledning

Varianter

Modal som kræver handling

Se komponenten i eksempelløsninger

Installation

HTML Struktur

JavaScript

Funktioner

Events

Modal som kræver handling

Web Component-koden er i beta

Om denne komponent

Varianter

Modal som kræver handling

Konfiguration

fds-modal

Attributter

Funktioner

Events

fds-modal-opener

Attributter

Events

fds-modal-closer

Attributter

Events

Referencer