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

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.

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 start- och slutpunkt.

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.

Alternativa komponenter

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


Parametrar på modalt fönster

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

contentRef

content-ref

Referens till innehållet i modalens "body".

string

-

footerRef

footer-ref

Referens till modalens sidfot.

string

-

heading

heading

Titlen på modalen.

string

-

open

open

Ska modalen visas?

boolean

false

Event på modalt fönster

Event

Beskrivning

Typ

openChange

Change event som triggas när open ändras i propertyn "detail" syns nya värdet på open.

CustomEvent<boolean>

jvModalOpen

Öppnar modalen kan skickas på komponenten eller på document objektet

CustomEvent<boolean>

jvModalClose

Stänger modalen kan skickas på komponenten eller på document objektet

CustomEvent<boolean>

jvModalClose

Togglar modalen kan skickas på komponenten eller på document objektet

CustomEvent<boolean>

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.

<!-- Button that open modal -->
<button class="c-btn--medium" aria-haspopup="modal" onclick="document.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 slot="footer" autofocus="" class="c-primary-btn--medium" onclick="document.dispatchEvent(new Event('jvModalClose'))">Ok</button>
  <button slot="footer" class="c-btn--medium" onclick="document.dispatchEvent(new Event('jvModalClose'))">Avbryt</button>
</jv-modal>

Äldre version av modalt fönster

Senast publicerad

Sidansvarig för sidan är Styleguide