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