700 #permalink Modal

Module: Mithril | React

Das Modal ist hier zum Zweck der beispielhaften Veranschaulichung static positioniert; normalerweise würde es sich mit einem seichten Hintergrund fixed über die Website legen (siehe Demo). Zudem liegt auf dem Öffnen des Modals bzw. auf .modal--visible eine pulse-Animation, die hier nur deaktiviert wurde.

Wenn keine Größe angegeben ist, passt sich das Modal bis zu seiner max-width & max-height an seinen Content an. Folgende fixe Größen für Tablets & Desktops können aber auch festgelegt werden:

s7590 - 75% breit, 90% hoch
s9090 - 90% breit, 90% hoch
s5050 - 50% breit, 50% hoch
s5075 - 50% breit, 75% hoch

Auf Smartphones nimmt das Modal immer 90% der Breite ein und wird bis zu 90% hoch.

Examples

Default styling

Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Spalte 1	Spalte 2	Spalte 3
Content	Content	Content
Content	Content	Content
Content	Content	Content

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

.modal--visible

Modal ist sichtbar, passt sich dem Content an, wird aber nicht höher als 90% und nicht breiter als 75% des Bildschirms

Überschrift

Spalte 1	Spalte 2	Spalte 3
Content	Content	Content
Content	Content	Content
Content	Content	Content

.modal--visible.modal--50-50

max. 50% des Bildschirms breit, max. 50% hoch

Überschrift

Spalte 1	Spalte 2	Spalte 3
Content	Content	Content
Content	Content	Content
Content	Content	Content

.modal--visible.modal--50-75

max. 50% des Bildschirms breit, max. 75% hoch

Überschrift

Spalte 1	Spalte 2	Spalte 3
Content	Content	Content
Content	Content	Content
Content	Content	Content

.modal--visible.modal--75-90

max. 75% des Bildschirms breit, max. 90% hoch

Überschrift

Spalte 1	Spalte 2	Spalte 3
Content	Content	Content
Content	Content	Content
Content	Content	Content

.modal--visible.modal--90-90

max. 90% des Bildschirms breit, max. 90% hoch

Überschrift

Spalte 1	Spalte 2	Spalte 3
Content	Content	Content
Content	Content	Content
Content	Content	Content

Markup

<div class="flex">
    <article class="modal modal--visible [modifier class]">
        <div class="modal__header">
            <span class="modal__headline">
                Phoenix Reisen Modal
            </span>
            <a class="modal__toggle" href="javascript:">
                <span class="desktop-only">schließen</span>
                <i class="fas fa-times-circle"></i>
            </a>
        </div>
        <div class="modal__content">
            <h3 class="pt0">Überschrift</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <table>
                <thead>
                    <tr>
                        <th>Spalte 1</th>
                        <th>Spalte 2</th>
                        <th>Spalte 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                </tbody>
            </table>
            <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="modal__footer tr">
            <button type="button" class="btn btn--link mr1">schließen</button>
            <button type="button">Speichern</button>
        </div>
    </article>
    <article class="modal__bg"></article>
</div>

Source: src/components/_modal.scss, line 1