Gå til sidens indhold

Vælg et tema

Luk

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 button button-unstyled"
                aria-label="Luk"
                data-modal-close><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#close"></use></svg></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. 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. Morbi condimentum
                tristique sapien, et fringilla ante consectetur at. Nulla
                vehicula imperdiet augue id cursus. Sed auctor finibus
                risus, sed consectetur augue sagittis eget. Orci varius
                natoque penatibus et magnis dis parturient montes, nascetur
                ridiculus mus. Maecenas auctor a urna eget ultricies.</p>
        </div>

        <div class="modal-footer">
            <button
                class="button button-primary">Primærknap</button><button
                class="button button-secondary"
                data-modal-close>Luk</button>
        </div>

    </div>
</div>

<button class="button button-primary" data-module="modal"
    data-target="modal-example">
    Gem
</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