Skip to content

Modal

Modale lenken die Aufmerksamkeit des Benutzers ausschließlich auf eine Aufgabe oder Information, indem sie ein Overlay verwenden, das über dem Seiteninhalt angezeigt wird.

Effektive und sparsame Verwendung von Modalfenstern

Ein Modal blockiert die Interaktion mit dem Seiteninhalt, bis der Benutzer entweder eine Aktion abschließt oder das Modal schließt. Da Modale den Arbeitsablauf der Benutzer:innen bewusst unterbrechen, sollten sie sparsam eingesetzt werden, um unnötige Störungen zu vermeiden.

Jedes Modal sollte eine klare, prägnante Überschrift enthalten, die den Zweck verständlich macht. Ergänzender Text sollte verständlich erklären, welche Aktion erwartet wird und warum diese notwendig ist. Modale werden nicht für komplexe Formulare oder umfangreiche Informationsmengen verwendet, um die Benutzerfreundlichkeit nicht zu beeinträchtigen.

<button
  class="btn btn-primary"
  type="button"
  data-bs-toggle="modal"
  data-bs-target="#primaryModal"
>
  Modal öffnen
</button>
<div
  class="modal fade"
  id="primaryModal"
  tabindex="-1"
  aria-labelledby="primaryModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="primaryModalLabel">Inhalt 100%</h4>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>
          Dies ist ein <strong>Typoblindtext</strong>. An ihm kann man sehen, ob
          alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man
          Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu
          testen.
        </p>
        <form class="form needs-validation" novalidate>
          <div class="form-group element-text">
            <div class="form-floating input-group">
              <input
                type="password"
                class="form-control"
                id="altes-passwort"
                name="altes-passwort"
                placeholder="Placeholder"
                required
              />
              <label for="altes-passwort">Aktuelles Passwort eingeben</label>
              <button type="button" id="toggle-altes-passwort">
                <span class="icon-visible"></span>
                <span class="visually-hidden">Passwort einblenden</span>
              </button>
              <div class="invalid-feedback">Individuelle Fehlermeldung</div>
              <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
            </div>
          </div>
          <div class="form-group element-text">
            <div class="form-floating input-group">
              <input
                type="password"
                class="form-control"
                id="neues-passwort"
                name="neues-passwort"
                placeholder="Placeholder"
                required
                data-pw-criteria="true"
                data-pw-match="true"
              />
              <label for="neues-passwort">Neues Passwort</label>
              <button type="button" id="toggle-neues-passwort">
                <span class="icon-visible"></span>
                <span class="visually-hidden">Passwort einblenden</span>
              </button>
              <div class="invalid-feedback">Individuelle Fehlermeldung</div>
              <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
            </div>
            <ul class="" data-criteria-list="neues-passwort">
              <li data-criterion="length">Mindestens 12 Zeichen</li>
              <li data-criterion="case">Groß- und Kleinbuchstaben</li>
              <li data-criterion="number">Mindestens 1 Ziffer</li>
              <li data-criterion="special">Mindestens 1 Sonderzeichen</li>
            </ul>
          </div>
          <div class="form-group element-text">
            <div class="form-floating input-group">
              <input
                type="password"
                class="form-control"
                id="neues-passwort-wiederholen"
                name="neues-passwort-wiederholen"
                placeholder="Placeholder"
                required
                data-pw-match="true"
              />
              <label for="neues-passwort-wiederholen"
                >Neues Passwort wiederholen</label
              >
              <button type="button" id="toggle-neues-passwort-wiederholen">
                <span class="icon-visible"></span>
                <span class="visually-hidden">Passwort einblenden</span>
              </button>
              <div class="invalid-feedback">Individuelle Fehlermeldung</div>
              <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
            </div>
          </div>
          <div class="button-group">
            <a class="btn btn-link" href="#"> Abbrechen </a>
            <button class="btn btn-primary" type="submit">Speichern</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Formatierung vom Modal

Der Inhalt eines Modals (z. B. Formularfelder, Body-Text, etc.) kann entweder in einem 100%-Container oder in einem 75%-Container dargestellt werden. Diese Option ermöglicht eine flexiblere Gestaltung des Inhalts, während die Größe des Modals selbst unverändert bleibt. Der 75%-Container eignet sich besonders für Inhalte, die eine reduzierte Breite benötigen, um die Lesbarkeit oder visuelle Struktur zu verbessern. Wichtig: Die Headline des Modals bleibt unabhängig vom verwendeten Container immer in voller Breite und wird nicht von der Containergröße beeinflusst.

<button
  class="btn btn-secondary"
  type="button"
  data-bs-toggle="modal"
  data-bs-target="#secondaryModal"
>
  Modal öffnen
</button>
<div
  class="modal fade"
  id="secondaryModal"
  tabindex="-1"
  aria-labelledby="secondaryModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="secondaryModalLabel">Inhalt 75%</h4>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-9">
            <p>
              Dies ist ein <strong>Typoblindtext</strong>. An ihm kann man
              sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal
              benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves,
              um Schriften zu testen.
            </p>
            <form class="form needs-validation" novalidate>
              <div class="form-group element-text">
                <div class="form-floating input-group">
                  <input
                    type="password"
                    class="form-control"
                    id="altes-passwort2"
                    name="altes-passwort2"
                    placeholder="Placeholder"
                    required
                  />
                  <label for="altes-passwort2"
                    >Aktuelles Passwort eingeben</label
                  >
                  <button type="button" id="toggle-altes-passwort2">
                    <span class="icon-visible"></span>
                    <span class="visually-hidden">Passwort einblenden</span>
                  </button>
                  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
                  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
                </div>
              </div>
              <div class="form-group element-text">
                <div class="form-floating input-group">
                  <input
                    type="password"
                    class="form-control"
                    id="neues-passwort2"
                    name="neues-passwort2"
                    placeholder="Placeholder"
                    required
                    data-pw-criteria="true"
                    data-pw-match="true"
                  />
                  <label for="neues-passwort2">Neues Passwort</label>
                  <button type="button" id="toggle-neues-passwort2">
                    <span class="icon-visible"></span>
                    <span class="visually-hidden">Passwort einblenden</span>
                  </button>
                  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
                  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
                </div>
                <ul class="" data-criteria-list="neues-passwort2">
                  <li data-criterion="length">Mindestens 12 Zeichen</li>
                  <li data-criterion="case">Groß- und Kleinbuchstaben</li>
                  <li data-criterion="number">Mindestens 1 Ziffer</li>
                  <li data-criterion="special">Mindestens 1 Sonderzeichen</li>
                </ul>
              </div>
              <div class="form-group element-text">
                <div class="form-floating input-group">
                  <input
                    type="password"
                    class="form-control"
                    id="neues-passwort-wiederholen-2"
                    name="neues-passwort-wiederholen-2"
                    placeholder="Placeholder"
                    required
                    data-pw-match="true"
                  />
                  <label for="neues-passwort-wiederholen-2"
                    >Neues Passwort wiederholen</label
                  >
                  <button
                    type="button"
                    id="toggle-neues-passwort-wiederholen-2"
                  >
                    <span class="icon-visible"></span>
                    <span class="visually-hidden">Passwort einblenden</span>
                  </button>
                  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
                  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
                </div>
              </div>
              <div class="button-group">
                <a class="btn btn-link" href="#"> Abbrechen </a>
                <button class="btn btn-primary" type="submit">Speichern</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Weitere Interaktionsmöglichkeiten

Es gibt verschiedene Interaktionsmöglichkeiten, mit denen ein Modal geöffnet wird. Dazu gehören der Primary Button, Secondary Button, Text Button, Icon Button aber auch ein Inputfeld. Diese Demo bietet eine anschauliche Darstellung, wie Modale durch unterschiedliche Auslöser verwendet werden und erleichtert das Verständnis ihrer Funktionalität und Einsatzmöglichkeiten.

Demo Text Button

<button
  class="btn btn-link"
  type="button"
  data-bs-toggle="modal"
  data-bs-target="#linkModal"
>
  Modal öffnen
</button>
<div
  class="modal fade"
  id="linkModal"
  tabindex="-1"
  aria-labelledby="linkModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="linkModalLabel">Inhalt 100%</h4>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>
          Dies ist ein <strong>Typoblindtext</strong>. An ihm kann man sehen, ob
          alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man
          Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu
          testen.
        </p>
        <form class="form needs-validation" novalidate>
          <div class="form-group element-text">
            <div class="form-floating input-group">
              <input
                type="password"
                class="form-control"
                id="altes-passwort-3"
                name="altes-passwort-3"
                placeholder="Placeholder"
                required
              />
              <label for="altes-passwort-3">Aktuelles Passwort eingeben</label>
              <button type="button" id="toggle-altes-passwort-3">
                <span class="icon-visible"></span>
                <span class="visually-hidden">Passwort einblenden</span>
              </button>
              <div class="invalid-feedback">Individuelle Fehlermeldung</div>
              <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
            </div>
          </div>
          <div class="form-group element-text">
            <div class="form-floating input-group">
              <input
                type="password"
                class="form-control"
                id="neues-passwort-3"
                name="neues-passwort-3"
                placeholder="Placeholder"
                required
                data-pw-criteria="true"
                data-pw-match="true"
              />
              <label for="neues-passwort-3">Neues Passwort</label>
              <button type="button" id="toggle-neues-passwort-3">
                <span class="icon-visible"></span>
                <span class="visually-hidden">Passwort einblenden</span>
              </button>
              <div class="invalid-feedback">Individuelle Fehlermeldung</div>
              <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
            </div>
            <ul class="" data-criteria-list="neues-passwort-3">
              <li data-criterion="length">Mindestens 12 Zeichen</li>
              <li data-criterion="case">Groß- und Kleinbuchstaben</li>
              <li data-criterion="number">Mindestens 1 Ziffer</li>
              <li data-criterion="special">Mindestens 1 Sonderzeichen</li>
            </ul>
          </div>
          <div class="form-group element-text">
            <div class="form-floating input-group">
              <input
                type="password"
                class="form-control"
                id="neues-passwort-wiederholen-3"
                name="neues-passwort-wiederholen-3"
                placeholder="Placeholder"
                required
                data-pw-match="true"
              />
              <label for="neues-passwort-wiederholen-3"
                >Neues Passwort wiederholen</label
              >
              <button type="button" id="toggle-neues-passwort-wiederholen-3">
                <span class="icon-visible"></span>
                <span class="visually-hidden">Passwort einblenden</span>
              </button>
              <div class="invalid-feedback">Individuelle Fehlermeldung</div>
              <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
            </div>
          </div>
          <div class="button-group">
            <a class="btn btn-link" href="#"> Abbrechen </a>
            <button class="btn btn-primary" type="submit">Speichern</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Demo Icon Button

<button
  class="btn btn-secondary"
  type="button"
  data-bs-toggle="modal"
  data-bs-target="#iconOnlySecondaryModal"
>
  <svg class="icon icon-edit">
    <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-edit"></use>
  </svg>
  <span class="visually-hidden">Modal öffnen</span>
</button>
<div
  class="modal fade"
  id="iconOnlySecondaryModal"
  tabindex="-1"
  aria-labelledby="iconOnlySecondaryModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="iconOnlySecondaryModalLabel">Inhalt 75%</h4>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-9">
            <p>
              Dies ist ein <strong>Typoblindtext</strong>. An ihm kann man
              sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal
              benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves,
              um Schriften zu testen.
            </p>
            <form class="form needs-validation" novalidate>
              <div class="form-group element-text">
                <div class="form-floating input-group">
                  <input
                    type="password"
                    class="form-control"
                    id="altes-passwort4"
                    name="altes-passwort4"
                    placeholder="Placeholder"
                    required
                  />
                  <label for="altes-passwort4"
                    >Aktuelles Passwort eingeben</label
                  >
                  <button type="button" id="toggle-altes-passwort4">
                    <span class="icon-visible"></span>
                    <span class="visually-hidden">Passwort einblenden</span>
                  </button>
                  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
                  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
                </div>
              </div>
              <div class="form-group element-text">
                <div class="form-floating input-group">
                  <input
                    type="password"
                    class="form-control"
                    id="neues-passwort4"
                    name="neues-passwort4"
                    placeholder="Placeholder"
                    required
                    data-pw-criteria="true"
                    data-pw-match="true"
                  />
                  <label for="neues-passwort4">Neues Passwort</label>
                  <button type="button" id="toggle-neues-passwort4">
                    <span class="icon-visible"></span>
                    <span class="visually-hidden">Passwort einblenden</span>
                  </button>
                  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
                  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
                </div>
                <ul class="" data-criteria-list="neues-passwort4">
                  <li data-criterion="length">Mindestens 12 Zeichen</li>
                  <li data-criterion="case">Groß- und Kleinbuchstaben</li>
                  <li data-criterion="number">Mindestens 1 Ziffer</li>
                  <li data-criterion="special">Mindestens 1 Sonderzeichen</li>
                </ul>
              </div>
              <div class="form-group element-text">
                <div class="form-floating input-group">
                  <input
                    type="password"
                    class="form-control"
                    id="neues-passwort-wiederholen-4"
                    name="neues-passwort-wiederholen-4"
                    placeholder="Placeholder"
                    required
                    data-pw-match="true"
                  />
                  <label for="neues-passwort-wiederholen-4"
                    >Neues Passwort wiederholen</label
                  >
                  <button
                    type="button"
                    id="toggle-neues-passwort-wiederholen-4"
                  >
                    <span class="icon-visible"></span>
                    <span class="visually-hidden">Passwort einblenden</span>
                  </button>
                  <div class="invalid-feedback">Individuelle Fehlermeldung</div>
                  <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
                </div>
              </div>
              <div class="button-group">
                <a class="btn btn-link" href="#"> Abbrechen </a>
                <button class="btn btn-primary" type="submit">Speichern</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Demo Formularfeld

Textplatzhalter für Verweis auf Formularelement Paswort

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Einbindung des Modals

Für eine korrekte Darstellung des Modals ist es wichtig, dass das Element direkt im <body> eingebunden und nicht tiefer verschachtelt wird. So kann sichergestellt werden, dass das Modal korrekt über dem Seiteninhalt angezeigt wird. Der Button, der das Modal öffnet, kann jedoch beliebig platziert werden.

<body>
  <!-- some sections, containers, components -->
    <!-- deeper nesting -->
  <!-- ... -->


  <div class="modal" ...>


  </div>
</body>