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

Modalvindue

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-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title" id="modal-example-title">
                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-primary" data-module="modal"
    data-target="modal-example">
    Å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