Gå til sidens indhold

Vælg et tema

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


Kode

Modal

Eksempel på modal komponent

Eksempler og retningslinjer

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

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