Styleguide

Modalt fönster

Du kan använda ett modalt fönster när du vill att användaren ska lämna huvudflödet för att utföra en avgränsad uppgift.

Design och språk

När du ska använda ett modalt fönster

Använda ett modalt fönster när du vill stoppa huvudflödet för att användaren ska fokusera på en uppgift som har en tydlig början och slut.

När du inte ska använda ett modalt fönster

Använd inte ett modalt fönster när användaren behöver mer information än vad som ges i det modala fönstret för att kunna utföra uppgiften.

Placering och innehåll

Ett modalt fönster ska:

  • placeras ovanpå informationen på sidan
  • innehålla en avgränsad uppgift som är relaterad till huvudflödet
  • stoppa huvudflödet tills dess att användaren stänger ner eller utför uppgiften
  • bara visas ett åt gången.

När användaren stänger det modala fönstret utan åtgärd ska användaren hamna på samma plats som den befann sig på tidigare.

Texten i det modala fönstret

Texten i det modala fönstret ska vara kort men innehålla all den information som användaren behöver för att kunna utföra uppgiften.

Tillgänglighet

För att göra ett modalt fönster tillgängligt ska

  • fokus bytas till dialog när det modala fönstret öppnas
  • tabbordningen stanna i fönstret till dess att det stängs
  • knappar som triggar att det modala fönstret visas ha attributet aria-haspopup="dialog".

Komponent och kod

Komponenten driftsattes första gången i version 12.0.0.

Parametrar på modalt fönster

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

contentRef

content-ref

Referens till innehållet i modalen

string

-






extraClass

extra-class

Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2"

string

-

footerRef

footer-ref

Referens till modalens sidfot

string


heading

heading

Titel på modalen

string

-

headingRef

heading-ref

Referens till huvudet i modalens sidhuvud. OBS. överskider det som anges i heading.

string

-

open

open

Attributet öppnar och stänger modalen


boolean

false

dataAutofocus

data-autofocus

Element med detta attribut hamnar i fokus när modalen öppnas.

-

-

Listener på modalt fönster

Event

Beskrivning

Typ

jvModalOpenChange

Triggas när open-attributet ändras. Du hittar ändrade värdet i "event.detail".


CustomEvent<boolean>

Events på modalt fönster

Event

Beskrivning

Typ

jvModalOpen

Öppnar modalen

CustomEvent<boolean>

jvModalClose

Stänger modalen

CustomEvent<boolean>

jvModalToggle

Togglar modalen


CustomEvent<boolean>

Du kan skicka ett event på en komponent eller på ett dokument-objekt.

Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.

HTML 
<!-- Button that open modal -->
<button type="button" class="c-btn c-btn--medium" aria-haspopup="modal" onclick="document.querySelector('jv-modal').dispatchEvent(new Event('jvModalOpen'))">Öppna modalt fönster</button>
<!-- ---------------------- -->

<jv-modal heading="Modalt fönster" content-ref="content" footer-ref="footer">
  <p slot="content">
    Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala
    tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir
    utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
  </p>
  <button type="button" slot="footer" data-autofocus="" class="c-btn c-btn--primary c-btn--medium" onclick="document.dispatchEvent(new Event('jvModalClose'))">Ok</button>
  <button type="button" slot="footer" class="c-btn c-btn--medium" onclick="document.dispatchEvent(new Event('jvModalClose'))">Avbryt</button>
</jv-modal>

Modalt fönster med eget huvud

Min egen rubrik

Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.

HTML 
<!-- Button that open modal -->
<button class="c-btn c-btn--medium" aria-haspopup="modal" onclick="document.querySelector('#jv-modal-customHeader').dispatchEvent(new Event('jvModalOpen'))">Öppna modalt fönster</button>
<!-- ---------------------- -->

<jv-modal content-ref="content" footer-ref="footer" heading-ref="modal-header" id="jv-modal-customHeader">
  <h1 class="modalHeadlineText" slot="modal-header" id="jv-modal-header"> Min egen rubrik </h1>
  <p slot="content">
    Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala
    tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen
    mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
  </p>
  <button type="button" data-autofocus="" class="c-btn c-btn--primary c-btn--medium" onclick="document.querySelector('#jv-modal-customHeader').dispatchEvent(new Event('jvModalClose'))" slot="footer">Ok
  </button>
  <button type="button" class="c-btn c-btn--medium" onclick="document.querySelector('#jv-modal-customHeader').dispatchEvent(new Event('jvModalClose'))" slot="footer">Avbryt
  </button>
</jv-modal>

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide