Dialogfenster auf Basis des nativen HTML-Elements <dialog> – mit eingebauter Barrierefreiheit und Backdrop.

Der Dialog ist in Bootstrap 6 die neue Komponente für überlagernde Fenster und ersetzt das bisherige Modal. Statt eigener Logik für Fokus, Hintergrund und Ebenen nutzt er, was der Browser mit showModal() ohnehin mitbringt.

• Modal oder nicht-modal: wahlweise mit Backdrop und Fokusfalle oder inline ohne Blockade.
• Top Layer: Modale Dialoge liegen über allem anderen auf der Seite.
• Animationen: Einblenden, von oben oder unten einfahren – oder ganz ohne.
• Größen und Vollbild:.dialog-sm bis .dialog-xl, Vollbild auch nur unterhalb eines Breakpoints.
• Ohne JavaScript: in unterstützten Browsern über die Invoker Commands API.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Funktionsweise

Die Dialog-Komponente nutzt das native <dialog>-Element des Browsers. Barrierefreiheit, Fokussteuerung und Hintergrund (Backdrop) bringt der Browser bereits mit – ohne aufwendige Eigenbauten.

Die wichtigsten Eigenschaften:

• Modal oder inline über showModal() / show(): Mit modal: true (Standard) landet der Dialog im Top Layer des Browsers, mit Backdrop und Fokusfalle. modal: false zeigt ihn inline.
• Eingebauter Backdrop über das Pseudo-Element ::backdrop (nur modal). backdrop: "static" sperrt Klicks außerhalb, backdrop: false blendet ihn aus.
• Escape-Taste schließt den Dialog standardmäßig; keyboard: false schaltet das ab.
• Barrierefreiheit: Der Fokus bleibt in modalen Dialogen gefangen und kehrt beim Schließen zum Auslöser zurück; die ARIA-Semantik liefert <dialog>.
• Animiertes Öffnen und Schließen: Eine Klasse .hiding hält den Dialog beim Schließen im Top Layer, damit die Ausblend-Animation (inklusive ::backdrop) sauber läuft.

Die Animation richtet sich nach der Media Query prefers-reduced-motion.

Beispiel

Ein Klick auf den Button öffnet den Dialog. Er nutzt die native API showModal() für echtes modales Verhalten.

<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialog">
  Dialog öffnen
</button>

<dialog class="dialog" id="exampleDialog">
  <div class="dialog-header">
    <h1 class="dialog-title">Dialog-Titel</h1>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Das ist ein natives dialog-Element. Für Barrierefreiheit und Fokussteuerung nutzt es das eingebaute Modal-Verhalten des Browsers.</p>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Schließen</button>
    <button type="button" class="btn-solid theme-primary">Änderungen speichern</button>
  </div>
</dialog>

Ohne JavaScript

In unterstützten Browsern öffnest und schließt du einen Dialog über die Invoker Commands API – ganz ohne Bootstrap-JavaScript. commandfor verweist auf die id des Dialogs, command="show-modal" öffnet, command="close" schließt.

<button type="button" class="btn-solid theme-primary" commandfor="invokerDialog" command="show-modal">
  Dialog öffnen
</button>

<dialog class="dialog" id="invokerDialog">
  <div class="dialog-header">
    <h1 class="dialog-title">Invoker Commands</h1>
    <button type="button" class="btn-close" commandfor="invokerDialog" command="close" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Dieser Dialog öffnet mit <code>command="show-modal"</code> und schließt mit <code>command="close"</code> – ganz ohne Bootstrap-JavaScript.</p>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" commandfor="invokerDialog" command="close">Schließen</button>
  </div>
</dialog>

Dunkler Dialog

Für einen dunklen Dialog setzt du data-bs-theme="dark" an das <dialog>-Element.

<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogDark">
  Dunklen Dialog öffnen
</button>

<dialog class="dialog" id="exampleDialogDark" data-bs-theme="dark">
  <div class="dialog-header">
    <h1 class="dialog-title">Titel des dunklen Dialogs</h1>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Ein natives dialog-Element, diesmal im dunklen Modus. Barrierefreiheit und Fokussteuerung kommen vom Browser.</p>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Schließen</button>
    <button type="button" class="btn-solid theme-primary">Änderungen speichern</button>
  </div>
</dialog>

Statischer Hintergrund

Mit backdrop auf static schließt ein Klick außerhalb den Dialog nicht. Probier es aus:

<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog" data-bs-backdrop="static">
  Dialog mit statischem Hintergrund öffnen
</button>

<dialog class="dialog" id="staticBackdropDialog">
  <div class="dialog-header">
    <h1 class="dialog-title">Statischer Hintergrund</h1>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Ein Klick außerhalb schließt mich nicht. Nutze den Schließen-Button oder drücke Escape.</p>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Schließen</button>
  </div>
</dialog>

Overlays

Tooltips, Popovers, Toasts und Menüs funktionieren in modalen Dialogen, brauchen aber etwas Sorgfalt. Modale Dialoge liegen über showModal() im Top Layer des Browsers – einer Ebene über allem anderen. Overlays, die an <body> angehängt werden, landen deshalb hinter dem Dialog. Setze data-bs-container auf das Dialog-Element, damit Tooltips und Popovers darin gezeichnet werden. Toasts funktionieren, solange sie im Markup des Dialogs stehen.

<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#dialogWithComponents">
  Dialog öffnen
</button>

<dialog class="dialog not-prose" id="dialogWithComponents">
  <div class="dialog-header">
    <h1 class="dialog-title">Overlays in Dialogen</h1>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Diese Komponenten funktionieren in modalen Dialogen.</p>
    <div class="d-flex gap-2 flex-wrap">
      <button type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-title="Tooltip in einem Dialog!">Tooltip</button>
      <button type="button" class="btn-solid theme-secondary" data-bs-toggle="popover" data-bs-title="Popover-Titel" data-bs-content="Dieses Popover sitzt in einem Dialog und wird im Top Layer gezeichnet. Der längere Text zeigt Platzierung und Zeilenumbruch." data-bs-placement="top">Popover</button>
      <button type="button" class="btn-solid theme-secondary" id="dialogToastBtn">Toast anzeigen</button>
      <button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu" aria-expanded="false">Menü</button>
      <div class="menu">
        <a class="menu-item" href="#">Aktion</a>
        <a class="menu-item" href="#">Weitere Aktion</a>
        <hr class="menu-divider" />
        <div class="submenu">
          <button class="menu-item" type="button">Mehr Optionen</button>
          <div class="menu">
            <a class="menu-item" href="#">Unteraktion A</a>
            <a class="menu-item" href="#">Unteraktion B</a>
            <div class="submenu">
              <button class="menu-item" type="button">Noch mehr</button>
              <div class="menu">
                <a class="menu-item" href="#">Tiefe Aktion 1</a>
                <a class="menu-item" href="#">Tiefe Aktion 2</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Schließen</button>
  </div>
  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div class="toast" id="dialogToast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        Toast in einem Dialog!
        <div class="mt-2 pt-2 border-top">
          <button type="button" class="btn-solid theme-primary btn-sm" data-bs-dismiss="toast">Schließen</button>
        </div>
      </div>
    </div>
  </div>
</dialog>

Animationen

Ohne Animation

Standardmäßig blenden Dialoge beim Öffnen und Schließen weich ein und aus. .dialog-instant am <dialog> schaltet die Animation ab.

<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#instantDialog">
  Dialog ohne Animation
</button>

<dialog class="dialog dialog-instant" id="instantDialog">
  <div class="dialog-header">
    <h1 class="dialog-title">Dialog ohne Animation</h1>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Dieser Dialog erscheint und verschwindet sofort, ohne Animation.</p>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Schließen</button>
    <button type="button" class="btn-solid theme-primary">Änderungen speichern</button>
  </div>
</dialog>

Von oben einfahren

Mit .dialog-slide-down fährt der Dialog beim Öffnen vom oberen Rand des Viewports nach unten herein.

<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#slideDownDialog">
  Von oben einfahrender Dialog
</button>

<dialog class="dialog dialog-slide-down" id="slideDownDialog">
  <div class="dialog-header">
    <h1 class="dialog-title">Von oben einfahrender Dialog</h1>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Dieser Dialog fährt vom oberen Rand des Viewports herein.</p>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Schließen</button>
    <button type="button" class="btn-solid theme-primary">Änderungen speichern</button>
  </div>
</dialog>

Von unten einfahren

Mit .dialog-slide-up fährt der Dialog vom unteren Rand nach oben herein.

<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#slideUpDialog">
  Von unten einfahrender Dialog
</button>

<dialog class="dialog dialog-slide-up" id="slideUpDialog">
  <div class="dialog-header">
    <h1 class="dialog-title">Von unten einfahrender Dialog</h1>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Dieser Dialog fährt vom unteren Rand des Viewports herein.</p>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Schließen</button>
    <button type="button" class="btn-solid theme-primary">Änderungen speichern</button>
  </div>
</dialog>

Scrollbar

.dialog-scrollable am .dialog lässt nur den Body scrollen, Kopf- und Fußbereich bleiben fest.

<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#scrollableBodyDialog">
  Dialog mit scrollbarem Inhalt öffnen
</button>

<dialog class="dialog dialog-scrollable" id="scrollableBodyDialog">
  <div class="dialog-header">
    <h1 class="dialog-title">Scrollbarer Inhalt</h1>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Platzhaltertext, der das Scrollverhalten zeigt. Viele Zeilenumbrüche lassen den Inhalt höher werden als den Dialog – der Body scrollt, Kopf- und Fußbereich bleiben stehen.</p>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <p>Dieser Text erscheint erst unten, nachdem du gescrollt hast.</p>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Schließen</button>
    <button type="button" class="btn-solid theme-primary">Änderungen speichern</button>
  </div>
</dialog>

Dialoge wechseln

Steckt ein Auslöser mit data-bs-toggle="dialog" in einem bereits geöffneten Dialog, tauscht ein Klick die Dialoge: Der neue öffnet, bevor der aktuelle schließt. So bleibt der Hintergrund durchgehend sichtbar und nichts flackert. Das passiert automatisch.

<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog1">
  Ersten Dialog öffnen
</button>

<dialog class="dialog" id="swapDialog1">
  <div class="dialog-header">
    <h1 class="dialog-title">Erster Dialog</h1>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Klicke unten, um zum zweiten Dialog zu wechseln. Der Hintergrund bleibt dabei sichtbar – kein Flackern!</p>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Schließen</button>
    <button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog2">Zum zweiten Dialog</button>
  </div>
</dialog>

<dialog class="dialog" id="swapDialog2">
  <div class="dialog-header">
    <h1 class="dialog-title">Zweiter Dialog</h1>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Das ist der zweite Dialog. Du kannst zurück zum ersten wechseln oder ihn ganz schließen.</p>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Schließen</button>
    <button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog1">Zurück zum ersten Dialog</button>
  </div>
</dialog>

Nicht-modale Dialoge

Standardmäßig öffnen Dialoge per showModal() als Modal. Mit modal auf false öffnen sie per show() nicht-modal. Nicht-modale Dialoge:

• haben keinen Backdrop,
• halten den Fokus nicht fest,
• blockieren den Rest der Seite nicht,
• werden nicht im Top Layer gezeichnet,
• reagieren weiterhin auf Escape (bei keyboard: true).

<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#nonModalDialog" data-bs-modal="false">
  Nicht-modalen Dialog öffnen
</button>

<dialog class="dialog" id="nonModalDialog">
  <div class="dialog-header">
    <h1 class="dialog-title">Nicht-modaler Dialog</h1>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Dieser Dialog blockiert die Seite nicht. Du kannst weiter mit dem Inhalt dahinter arbeiten.</p>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Schließen</button>
  </div>
</dialog>

Per JavaScript erzeugst du einen nicht-modalen Dialog über die Option modal:

const dialog = new bootstrap.Dialog('#myDialog', { modal: false })
dialog.show()

Optionale Größen

Dialoge gibt es in drei optionalen Größen über Modifier-Klassen am .dialog. Sie greifen erst ab bestimmten Breakpoints, damit auf schmalen Viewports kein horizontaler Scrollbalken entsteht.

<dialog class="dialog dialog-xl">…</dialog>
<dialog class="dialog dialog-lg">…</dialog>
<dialog class="dialog">…</dialog>
<dialog class="dialog dialog-sm">…</dialog>

Vollbild-Dialog

Mit .dialog-fullscreen füllt der Dialog den gesamten Viewport.

<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogFullscreen">
  Vollbild-Dialog
</button>

<dialog class="dialog dialog-fullscreen" id="exampleDialogFullscreen">
  <div class="dialog-header">
    <h1 class="dialog-title">Vollbild-Dialog</h1>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Dieser Dialog füllt den gesamten Viewport.</p>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Schließen</button>
  </div>
</dialog>

Es gibt auch responsive Varianten, die nur unterhalb eines bestimmten Breakpoints im Vollbild erscheinen.

<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogFullscreenLg">
  Vollbild unterhalb von lg
</button>

<dialog class="dialog lg-down:dialog-fullscreen" id="exampleDialogFullscreenLg">
  <div class="dialog-header">
    <h1 class="dialog-title">Vollbild unterhalb von lg</h1>
    <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Schließen"></button>
  </div>
  <div class="dialog-body">
    <p>Dieser Dialog ist unterhalb des Breakpoints <code>lg</code> im Vollbild.</p>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Schließen</button>
  </div>
</dialog>

Verwendung

Per Data-Attribute

Ohne eigenes JavaScript öffnest du einen Dialog mit data-bs-toggle="dialog" an einem Auslöser (z. B. einem Button) und data-bs-target="#foo" für den Ziel-Dialog.

<button type="button" data-bs-toggle="dialog" data-bs-target="#myDialog">
  Launch dialog
</button>

Schließen

Zum Schließen setzt du data-bs-dismiss an einen Button innerhalb des Dialogs:

<button type="button" data-bs-dismiss="dialog">Close</button>

Per JavaScript

Einen Dialog erzeugst du mit einer Zeile:

const myDialog = new bootstrap.Dialog('#myDialog')

Optionen

Optionen übergibst du per Data-Attribut oder JavaScript. Beim Data-Attribut hängst du den Optionsnamen an data-bs- an, z. B. data-bs-backdrop="static".

Methoden

Optionen übergeben

Macht deinen Inhalt zum Dialog; optional mit Options-Objekt.

const myDialog = new bootstrap.Dialog('#myDialog', {
  keyboard: false
})

Events

Die Dialog-Klasse stellt folgende Events bereit:

const myDialog = document.getElementById('myDialog')
myDialog.addEventListener('hidden.bs.dialog', event => {
  // do something...
})

CSS-Variablen, Sass-Tokens und die Sass-Map $dialog-sizes findest du in der Originaldokumentation.