Vælg et tema
LukVæ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 |