Modal Popups

Die modal Komponente zeigt anpassbare Dialogfenster über dem Seiteninhalt an. Diese können für Bestätigungsaufforderungen, Formulare oder zur Anzeige zusätzlicher Informationen verwendet werden.

WCAG AA
WCAG AAA
JavaScript

Funktionen

  • Konfigurierbare Breite: Einstellbare maximale Breite in rem.

  • Aktionsschaltflächen: Anpassbare Schaltflächen am unteren Rand des Dialogfelds.

  • Titel und Beschreibung: Überschrift mit optionaler Beschreibung.

  • Klick auf den Hintergrund: Schließt das Modalfenster, wenn außerhalb davon geklickt wird (konfigurierbar).

HTML
JS

Verwendung

Die Komponente wird über das modal-Tag eingebunden. Zusätzlich wird ein Auslöser benötigt, welcher das Erscheinen des Dialogs bewirkt, wenn der Benutzer darauf klickt. Dieser Auslöser kann jedes beliebe HTML-Tag sein und benötigt das Attribut data-insight-modal, dessen Wert die ID des Ziel-Elements (des Dialogs) ist.

{% load insight_tags %} <button class="btn btn-primary" data-insight-modal="demo-modal"> {% trans "Open Modal" %} </button> {% modal tag_id="demo-modal" title=_("Demo Modal") description=_("Dies ist ein Beispiel-Modal mit Standard-Styling!") %}

Parameter

Laden…

config (ModalConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
tag_id str

Eindeutige Tag-ID für die Identifizierung des Elements im JavaScript. Erforderlich zum Öffnen/Schließen des Modal-Dialogs.

 None True
title str

Überschrift des Modal Dialogs.

 None True
description str | list[str]

Ein Text in der Mitte des modalen Dialogfelds. Dieser kann durch eine Erweiterung des Templates angepasst werden.

 "" False
actions

Liste von Buttons, welche um unteren Ende des Dialogs angezeigt werden.

 [] False
width int

Die maximale Breite des Dialogfensters relativ zum Bildschirm in „rem“.

 32 False
ModalConfig( tag_id="delete-confirm", title="Confirm Deletion", description="Are you sure you want to delete this item? This action cannot be undone.", actions=[ ButtonConfig(label="Delete", type="danger", on_click="deleteItem()"), ButtonConfig(label="Cancel", type="secondary", data_attrs=[DataAttrConfig("insight-dismiss", "modal")]), ], width=24, )

Barrierefreiheit

WCAG AA WCAG AAA
Status

WCAG AA (Grundlagen)

  • Vollständiges ARIA-Dialogmuster: role='dialog', aria-modal='true', tabindex='-1'.

  • Der Titel ist über aria-labelledby mit dem Element <h2> verknüpft.

  • Die Beschreibung ist über aria-describedby verlinkt, sofern vorhanden.

  • Die „Schließen“ Button verfügt über ein beschreibendes aria-label („Schließen“).

  • Durch Anklicken des Hintergrunds lässt sich das Modalfenster schließen.

  • Buttons sind mit beschreibenden Textbeschriftungen versehen.

  • Das Scrollen auf der Seite ist gesperrt, solange das Modal geöffnet ist.

  • Durch Drücken der Escape-Taste wird das Dialogfenster geschlossen.

WCAG AAA (Erweitert)

  • Die Fokusbindung wurde implementiert, um den Tastaturfokus innerhalb des modalen Fensters zu halten.

  • Der Fokus kehrt zum Auslöseelement zurück, wenn das Modal geschlossen wird.

Verwandte Themen