Notification Layer

TIP

Notification layer with optional close button that is displayed on top of any content.

• Based on Alerts.

• Use class .js-close-layer to close layer on click

Hide Layer per Default

.c-notification.-hidden

Positioning / Widths

.c-notification[.-top/.-bottom] > .c-notification__content[.-wide, .-fullsize]

(remove .h-pos-relative from the Demo Code)

Top

INFO

Top notification layer.

Bottom

.c-notification.-bottom (remove .h-pos-relative from the Demo Code)

INFO

Fullwidth content in bottom notification.

Fullsize

.c-notification > .c-notification__content.-fullsize

INFO

Fullwidth content.

Colors / States

.c-notification[.-notice/.-success/.-error/.-warning] > .c-notification__content.c-alert[.-notice/.-success/.-error/.-warning]

Success

INFO

Success

Warning

INFO

-warning

Error

INFO

-error

IE

Show layer only in IE and set session cookie: .js-ie-layer

INFO

Mit dem nächsten größeren Update beenden wir den Support des in die Jahre gekommenen Internet Explorer 11. Bitte nutzen Sie LabXpert mit einem der vorgeschlagenen Browser wie z.B. Google Chrome, Mozilla Firefox, Microsoft Edge oder Apple Safari. Vielen Dank!

Public JavaScript Methods

TIP

Initialize Notification JS, handles close buttons:
Notification.init(settings: object)

Opens a specific notification layer:
Notification.showLayer(layer: Node);

Closes a specific notification layer:
Notification.hideLayer(layer: Node);