MODAL by Tonino Gerns

Das Modal-Element erweitert den YOOtheme Pro Builder um einen Dialog, der sich nicht nur per Klick öffnet. Den Inhalt baust du aus Builder-Elementen zusammen, den Auslöser wählst du im selben Element, und du bestimmst, wie oft der Dialog einem Besucher erscheint. Läuft in Joomla 5 und 6 mit YOOtheme Pro 4.x und 5.x auf Basis von UIkit 3.

Vier Auslöser und automatisches Schließen

Der Typ Standard öffnet das Modal über einen Button oder Textlink, den du im Element selbst gestaltest. Auto-Open öffnet nach einer Verzögerung in Sekunden, wobei 0 sofort bedeutet. Scroll-Triggered wartet auf eine Scrolltiefe zwischen 5 und 100 Prozent, in Schritten von 5. Exit-Intent reagiert, sobald der Mauszeiger den oberen Fensterrand verlässt. Der Dialog schließt sich auf Wunsch nach einer gesetzten Zahl von Sekunden selbst, und ein Video im Modal startet beim Öffnen und pausiert beim Schließen, für HTML5-Video sowie YouTube und Vimeo.

Anzeigehäufigkeit ohne Cookie

Für die drei automatischen Trigger legst du fest, wie oft der Dialog erscheint: bei jedem Seitenaufruf, einmal pro Sitzung, genau einmal und nie wieder oder erneut nach einer gesetzten Zahl von Tagen. Gemerkt wird das im sessionStorage oder localStorage des Browsers, unter einem Schlüssel aus der Modal-ID. Es entsteht kein Cookie, kein Drittanbieter-Skript wird geladen, und der Wert verlässt den Browser nicht.

Nach WCAG 2.1 AA gebaut

Der Dialog trägt role=dialog und aria-modal=true und ist über aria-labelledby mit seiner Überschrift verknüpft. Ohne sichtbare Überschrift vergibst du im Feld ARIA Label eine eigene Beschriftung. Beim Öffnen wandert der Fokus auf den Modaltitel, beim Schließen zurück auf das Element, das den Dialog geöffnet hat. Die Escape-Taste ist ab Werk aktiv, der Schließen-Button trägt eine übersetzte Beschriftung, und Auslöser ohne sichtbaren Text bekommen ein eigenes ARIA-Label. Genau daran scheitern Dialoge in Prüfungen nach BITV 2.0 und EN 301 549 üblicherweise.

Breite, Layout und bis zu drei Footer-Buttons

Drei Breitenmodi: Dialog in UIkit-Standardbreite, Container auf Breite deines Seitenlayouts, Full Screen über das gesamte Fenster. Dazu kommen vier Abstufungen für den Innenabstand, vertikale Zentrierung, ein eigener Scrollbereich für lange Inhalte und acht Öffnungsanimationen. Im Footer platzierst du bis zu drei Buttons, jeder mit Text, Icon, acht Stilen, drei Größen und Position links, mittig oder rechts.

Mehrstufige Abläufe und Mehrfach-Auslöser

Ein Footer-Button vom Typ Step schließt den aktuellen Dialog und öffnet über dessen Modal-ID den nächsten, womit du mehrere Modals zu einem Ablauf verkettest, etwa Hinweis, Auswahl, Bestätigung. Bei aktiver Stapel-Option bleibt der vorherige Dialog im Hintergrund sichtbar. Der Referenz-Modus erzeugt umgekehrt nur einen Auslöser für ein Modal, das an anderer Stelle der Seite steht: Mehrere Buttons öffnen denselben Dialog, ohne den Inhalt zu duplizieren. Ein CSS-Feld am Element begrenzt jeden Selektor automatisch auf die ID dieses Modals.