Gå til sidens indhold

Kode

MicroModal.js

Modalvinduer er separate vinduer, som popper-up, når du aktiverer dem. De indeholder typisk afgrænset viden og kommer i to former: Åben modal (aktiv) indeholder tekst og link, som brugeren kan handle på. Åben modal (passiv) indeholder kun tekst, som brugeren kan læse.

<button class="button button-primary"
    data-micromodal-trigger="modal-active">Åben modal (aktiv)</button>
<button class="button button-primary"
    data-micromodal-trigger="modal-passive">Åben modal (passiv)</button>

<div class="modal" id="modal-active" aria-hidden="true">
    <div class="modal__overlay bg-modal" tabindex="-1"
        data-micromodal-close>
        <div class="modal__container" role="dialog" aria-modal="true"
            aria-labelledby="modal-title-1">
            <div class="modal__header">
                <h1 class="modal__title h2" id="modal-title-1">
                    Modal
                </h1>
            </div>
            <div class="modal__content">
                <p>Modalens indhold. Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad
                    minim veniam, quis nostrud exercitation ullamco laboris
                    nisi ut aliquip ex ea commodo consequat</p>
            </div>

            <div class="modal__footer">
                <button class="button button-primary"
                    aria-label="Fx bekræft handling">Primærknap</button><button
                    class="button button-secondary" data-micromodal-close
                    aria-label="Fx lukker modal vinduet">Sekundærknap</button>
            </div>

            <button class="modal__close button button-secondary"
                aria-label="Close modal" data-micromodal-close>Luk</button>
        </div>
    </div>
</div>

<div class="modal" id="modal-passive" aria-hidden="true">
    <div class="modal__overlay bg-modal" tabindex="-1"
        data-micromodal-close>
        <div class="modal__container" role="dialog" aria-modal="true"
            aria-labelledby="modal-title-2">
            <div class="modal__header">
                <h1 class="modal__title h2" id="modal-title-2">
                    Modal
                </h1>
            </div>
            <div class="modal__content">
                <p>Modalens indhold. Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad
                    minim veniam, quis nostrud exercitation ullamco laboris
                    nisi ut aliquip ex ea commodo consequat</p>
            </div>

            <button class="modal__close button button-secondary"
                aria-label="Close modal" data-micromodal-close>Luk</button>
        </div>
    </div>
</div>

Implementering

Modal komponenten er implementeret med scriptet Micromodal.

Bemærk, at Micromodal.js fejler i Internet Explorer. For at løse dette skal man inkludere et polyfill - fx @babel/polyfill.

Installer dkfds-plugins fra npm og inkludér enten CSS eller SCSS filen for pluginnet i dit projekt. For mere info, se implementering af DKFDS.

Stien til filen du skal inkludere for MicroModal er henholdsvis [path-to-plugins-project]/dist/css/dkfds-micromodal-theme.standalone.min.css for CSS filen og ~dkfds-plugins/dist/scss/dkfds-micromodal-theme for SCSS filen.

En modal kan åbnes ved at sætte følgende attribut på fx en knap: data-micromodal-trigger="modal-id". Dette vil åbne modalen som har id’et ‘modal-id’

En modal kan lukkes ved at sætte følgende attribut på en knap inde i modalen: data-micromodal-close.

Det er også muligt at åbne og lukke modalen programmatisk via javascript: MicroModal.show('modal-id'); og MicroModal.close('modal-id');</p>

Html struktur af en modal:

  • For at modalen kan åbne skal denne have et id: <div class="modal" id="modal-id" aria-hidden="false">
  • Der sættes automatisk fokus på det første fokusbare element i modalen. Luk-knappen skal derfor HTML-mæssigt placeres til sidste i modalen.
  • En modal er opdelt i tre dele: modal__header, modal__content og modal__footer.

Retningslinjer

Tilgængelighed

  • Det anbefalede plugin, MicroModal, følger WAI-anbefalingerne for tilgængelighed.
  • Du skal fortsat sikre, at der sættes focus på første element fx brødtekst i dit modalvindue, da indholdet ellers ikke læses op af skærmlæsere.

Brugervenlighed

Anvendes til

  • Modalvinduer anvendes til at tvinge brugerens fokus på et specifikt, afgrænset indhold, hvor den interaktive respons og forståelse er centralt for brugerens videre anvendelse af løsningen. Det kunne fx være en godkendelse af en handling, behov for bekræftelse eller overførsel af rettigheder, som løsningen skal kunne udføre for at kunne fuldføre sin dialog med brugeren.
  • Brug modalvinduer, når du vil være sikker på, at brugeren ser en bestemt dialog og forholder sig til dens indhold.

Anvendes ikke til

  • Modalvinduer kan ikke erstatte individuelle sider i en selvbetjeningsløsning eller hjemmeside.
  • Modalvinduer anvendes ikke til længere, sammenhængende indhold.
  • Modalvinduer anvendes i begrænset omfang, da de kan øge løsningens kognitive load pga brugerens fokus flyttes.
  • Undgå modalvinduer på mobile løsninger og visninger, da de ikke fungerer godt for brugeren.

Vejledning

  • Modalvinduet skal have en meningsfuld overskrift, der klart relaterer sig til konteksten.
  • Knapper i modalvinduet skal være tydelige, meningsfulde og følge Det Fælles Designsystems øvrige anbefalinger for knapper.
  • Vær sikker på at modalvinduet kun akkurat passer til sit indhold og ikke dækker baggrunden (selve løsningen) fuldstændigt. Det er nødvendigt, at brugeren forstår, at de ikke har skiftet kontekst.
  • Brugeren skal selv aktivere modalvinduet. Det må ikke aktiveres per automatik, da det kan have en modsatrettet effekt, hvor brugeren lukker det i affekt.