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

Modal som kræver handling

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 xlink: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-tertiary" 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

Events

Modal som kræver handling

<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-tertiary" data-module="modal" data-target="modal-example-locked"
    aria-haspopup="dialog">
    Åbn modal
</button>

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.