Layer & Popup

Layer

Der Layer ist eine weiße Box, die in einer separaten Ebene über der Seite geöffnet wird. In ihr können Inhalte außerhalb des eigentlichen Seiteninhalts angezeigt werden, ohne die Seite verlassen zu müssen, so dass der Nutzer den ursprünglichen Kontext nicht verliert.

Der Layer ist ein sehr komplexes Pattern mit einer Reihe von Konfigurationsmöglichkeiten und Funktionalitäten, die in den technischen Hinweisen ausführlich beschrieben sind.

In der Standardvariante nimmt der Layer in den Breakpoints S und M die volle Breite und Höhe des Viewports ein. In L und XL hingegen ist er in der Breite auf 83,3% bzw. 66,6% und 600px in der Höhe begrenzt.
Einen Unterschied zwischen den Breakpoints gibt es ebenfalls bei der Positionierung der Fläche mit dem "Schließen-X": Auf S, L und XL ist sie oberhalb der Box angeordnet und auf M rechts daneben, um den Platz in der Breite hier optimal auszunutzen.
Sowohl die Größe als auch die Anzeige des "Schließen-X" können mit den zur Verfügung stehenden Optionen konfiguriert werden.

Hinweis: In Layern sollten keine Formularelemente eingesetzt werden, da diese Kombination vor allem in mobilen Browsern häufig zu Darstellungsproblemen führt. Stattdessen sollte für komplexere Inhalte besser eine eigene Seite angelegt werden.

Standardvariante

mit expliziter Höhe und Breite

nicht-modal mit Inline-Inhalt

mit Content-Switch

ohne Schließen-Button

ohne Schließen-Button im S- und M-Breakpoint

mit Menüleiste

mit Fehlermeldung

Layer mit alternativem Ziel für native Navigation (oder Bots)

Für dieses Pattern ist kein Konfigurator verfügbar!

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!