Modal

Ein Modal setzt Information in den Fokus um den Nutzer nicht aus dem aktuellen Prozess zu leiten. Es legt sich als Layer über den Hintergrund, sodass nicht mehr mit ihm interagiert werden kann.

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aperiam atque eius esse uia similique. Dolore, voluptatem!

Modal

Das Modal wird horizontal und vertikal mittig dargestellt.
Die Höhe ist variabel, die Breite ist in "Small" / "Default" / "Large" vorgegeben.
Ist die Breite kleiner als der angegebene Viewport, passt sich diese automatisch an.

Durch einen Klick auf das definierte "close icon" oder den negativen Bereich wird das Modal geschlossen.
Buttons werden rechtsbündig angeordnet. Innerhalb der Button Gruppe ist die primäre Aktion rechts und die sekundäre links anzuordnen.

Maximale Breite: 300px
Overlay Hintergrund:   rgba(0, 0, 0, 0.5)

Maximale Breite: 500px
Overlay Hintergrund:   rgba(0, 0, 0, 0.5)

Maximale Breite: 800px
Overlay Hintergrund:   rgba(0, 0, 0, 0.5)

Für die Formatierung der Modalfenster stehen zwei weitere Klassen zur Verfügung die der Klasse .modal-dialog beigefügt werden.
.modal-lg (Maximale Breite: 800px), .modal-sm (Maximale Breite: 300px)


    //Standard Modal
Modal Bereiche/Abmessungen
Modal Header

Schrift: Roboto Medium / 18px
Innenabstand: 32px 32px 8px 32px
Icon 24px x 24px

Modal Content

Schrift: Roboto Regular / 14px
Innenabstand: 16px 32px 32px 32px

Modal Footer

Buttons
Innenabstand: 16px 32px 32px 32px

Alert Modal

Unterbrechen Benutzer mit dringenden Informationen, Details oder Aktionen, welche durch die System-Signalfarben gekennzeichnet sind. Ein Alert Modal wird nur in der "Default Modal" größe angezeigt.

class="modal modal-alert-danger fade"

Alert Modal Header

Innenabstand: 20px 32px 20px 32px

Alert Modal Content

Innenabstand: 32px 32px 32px 32px;

Alert Modal Footer

Innenabstand: 16px 32px 32px 32px

Alert Modal Signalfarben

.modal-alert-success modal-alert-warning .modal-alert-danger .modal-alert-info