Modal (Kode) | Det Fælles Designsystem

Kode

Modal som kræver handling

Eksempler og retningslinjer

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>

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();

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

Varianter

Modal som kræver handling

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

Vælg et tema

Modal