Phoenix Reisen Styleguide

700 #permalink Modal

Toggle example guides Toggle HTML markup

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
.modal--visible
Modal ist sichtbar, passt sich dem Content an, wird aber nicht höher als 90% und nicht breiter als 75% des Bildschirms
.modal--visible.modal--50-50
max. 50% des Bildschirms breit, max. 50% hoch
.modal--visible.modal--50-75
max. 50% des Bildschirms breit, max. 75% hoch
.modal--visible.modal--75-90
max. 75% des Bildschirms breit, max. 90% hoch
.modal--visible.modal--90-90
max. 90% des Bildschirms breit, max. 90% hoch
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