in English

Modal

Verwenden Sie das modale JavaScript-Plugin von Bootstrap, um Ihrer Website Dialoge für Leuchtkästen, Benutzerbenachrichtigungen oder vollständig benutzerdefinierte Inhalte hinzuzufügen.

Wie es funktioniert

Bevor Sie mit der modalen Komponente von Bootstrap beginnen, lesen Sie unbedingt das Folgende, da sich unsere Menüoptionen kürzlich geändert haben.

Modale werden mit HTML, CSS und JavaScript erstellt. Sie werden über allem anderen im Dokument positioniert und entfernen den Bildlauf aus dem <body>, sodass der modale Inhalt stattdessen gescrollt wird.
Durch Klicken auf den modalen „Hintergrund“ wird das Modal automatisch geschlossen.
Bootstrap unterstützt jeweils nur ein modales Fenster. Verschachtelte Modale werden nicht unterstützt, da wir glauben, dass sie eine schlechte Benutzererfahrung darstellen.
Modale verwenden position: fixed, was manchmal etwas speziell in Bezug auf die Wiedergabe sein kann. Platzieren Sie Ihr modales HTML nach Möglichkeit an einer Position der obersten Ebene, um potenzielle Störungen durch andere Elemente zu vermeiden. Sie werden wahrscheinlich auf Probleme stoßen, wenn Sie ein .modalin ein anderes festes Element verschachteln.
Auch position: fixedhier gibt es aufgrund von einige Vorbehalte bei der Verwendung von Modals auf Mobilgeräten. Weitere Informationen finden Sie in unseren Browser-Support-Dokumenten .
Aufgrund dessen, wie HTML5 seine Semantik definiert, hat das autofocusHTML-Attribut keine Wirkung in Bootstrap-Modalen. Um den gleichen Effekt zu erzielen, verwenden Sie ein benutzerdefiniertes JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Der Animationseffekt dieser Komponente ist abhängig von der prefers-reduced-motionMedienanfrage. Weitere Informationen finden Sie im Abschnitt zur reduzierten Bewegung in unserer Dokumentation zur Barrierefreiheit .

Lesen Sie weiter für Demos und Nutzungsrichtlinien.

Beispiele

Unten ist ein statisches modales Beispiel (was bedeutet , dass positionund displayüberschrieben wurden). Enthalten sind die modale Kopfzeile, der modale Hauptteil (erforderlich für padding) und die modale Fußzeile (optional). Wir bitten Sie, wann immer möglich modale Kopfzeilen mit Ablehnungsaktionen einzuschließen oder eine andere ausdrückliche Ablehnungsaktion bereitzustellen.

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Live-Demo

Schalten Sie eine funktionierende modale Demo um, indem Sie auf die Schaltfläche unten klicken. Es gleitet nach unten und wird vom oberen Rand der Seite eingeblendet.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Statischer Hintergrund

Wenn der Hintergrund auf statisch eingestellt ist, wird das Modal nicht geschlossen, wenn Sie außerhalb davon klicken. Klicken Sie auf die Schaltfläche unten, um es zu versuchen.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Scrollen von langen Inhalten

Wenn Modale für den Darstellungsbereich oder das Gerät des Benutzers zu lang werden, scrollen sie unabhängig von der Seite selbst. Probieren Sie die Demo unten aus, um zu sehen, was wir meinen.

What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

Sie können auch ein scrollbares Modal erstellen, das es ermöglicht, den Modalkörper zu scrollen, indem Sie .modal-dialog-scrollablezu hinzufügen .modal-dialog.

What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Vertikal zentriert

Fügen Sie hinzu .modal-dialog-centered, .modal-dialogum das Modal vertikal zu zentrieren.

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

Tooltips und Popovers

Tooltips und Popovers können nach Bedarf innerhalb von Modals platziert werden. Wenn Modale geschlossen werden, werden auch alle QuickInfos und Popovers darin automatisch ausgeblendet.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Verwenden des Rasters

Verwenden Sie das Bootstrap-Rastersystem innerhalb eines Modals, indem Sie es .container-fluidinnerhalb der .modal-body. Verwenden Sie dann die normalen Rastersystemklassen wie überall sonst.

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Haben Sie eine Reihe von Schaltflächen, die alle dasselbe Modal mit leicht unterschiedlichen Inhalten auslösen? Verwenden Sie event.relatedTargetund HTML- data-*Attribute (möglicherweise über jQuery ), um den Inhalt des Modals abhängig davon zu variieren, auf welche Schaltfläche geklickt wurde.

Unten finden Sie eine Live-Demo, gefolgt von HTML- und JavaScript-Beispielen. Weitere Informationen finden Sie in der Dokumentation zu modalen Ereignissen für Details zu relatedTarget.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Animation ändern

Die $modal-fade-transformVariable bestimmt den Transformationszustand von .modal-dialogvor der modalen Einblendanimation, die $modal-show-transformVariable bestimmt die Transformation von .modal-dialogam Ende der modalen Einblendanimation.

Wenn Sie zum Beispiel eine Zoom-In-Animation wünschen, können Sie $modal-fade-transform: scale(.8).

Animation entfernen

Entfernen Sie für Modale, die einfach angezeigt und nicht eingeblendet werden, die .fadeKlasse aus Ihrem modalen Markup.

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Dynamische Höhen

Wenn sich die Höhe eines Modals ändert, während es geöffnet ist, sollten Sie aufrufen $('#myModal').modal('handleUpdate'), um die Position des Modals neu anzupassen, falls eine Bildlaufleiste angezeigt wird.

Barrierefreiheit

Stellen Sie sicher, dass Sie aria-labelledby="...", unter Bezugnahme auf den modalen Titel, zu hinzufügen .modal. aria-describedbyZusätzlich können Sie mit on eine Beschreibung Ihres modalen Dialogs angeben .modal. Beachten Sie, dass Sie es nicht hinzufügen müssen, role="dialog"da wir es bereits über JavaScript hinzufügen.

YouTube-Videos einbetten

Das Einbetten von YouTube-Videos in Modale erfordert zusätzliches JavaScript, das nicht in Bootstrap enthalten ist, um die Wiedergabe automatisch zu stoppen und mehr. Weitere Informationen finden Sie in diesem hilfreichen Stack Overflow-Beitrag .

Optionale Größen

Modale haben drei optionale Größen, die über Modifikatorklassen verfügbar sind, die auf einer .modal-dialog. Diese Größen treten an bestimmten Haltepunkten ein, um horizontale Bildlaufleisten in schmaleren Ansichtsfenstern zu vermeiden.

Größe	Klasse	Modale maximale Breite
Klein	`.modal-sm`	`300px`
Standard	Keiner	`500px`
Groß	`.modal-lg`	`800px`
Extra groß	`.modal-xl`	`1140px`

Unser Standardmodal ohne Modifikatorklasse bildet das Modal „mittlerer“ Größe.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Verwendungszweck

Das Modal-Plugin schaltet Ihre versteckten Inhalte bei Bedarf über Datenattribute oder JavaScript um. Es fügt .modal-openauch das <body>standardmäßige Bildlaufverhalten außer Kraft und generiert einen .modal-backdropKlickbereich zum Verwerfen angezeigter Modale, wenn außerhalb des Modals geklickt wird.

Über Datenattribute

Aktivieren Sie ein Modal, ohne JavaScript zu schreiben. Setzen Sie data-toggle="modal"es auf ein Controller-Element, wie eine Schaltfläche, zusammen mit einem data-target="#foo"oder href="#foo", um ein bestimmtes Modal zum Umschalten auszuwählen.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Über JavaScript

Rufen Sie ein Modal mit id myModalmit einer einzigen JavaScript-Zeile auf:

$('#myModal').modal(options)

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-, wie in data-backdrop="".

Name	Typ	Standard	Beschreibung
Hintergrund	boolean oder die Zeichenfolge`'static'`	Stimmt	Enthält ein modales Hintergrundelement. Geben Sie alternativ `static`einen Hintergrund an, der das Modal beim Klicken nicht schließt.
Klaviatur	boolesch	Stimmt	Schließt das Modal, wenn die Escape-Taste gedrückt wird
Fokus	boolesch	Stimmt	Legt bei der Initialisierung den Fokus auf das Modal.
Show	boolesch	Stimmt	Zeigt das Modal bei der Initialisierung an.

Methoden

Asynchrone Methoden und Übergänge

Alle API-Methoden sind asynchron und starten einen Übergang . Sie kehren zum Aufrufer zurück, sobald der Übergang gestartet wird, aber bevor er endet . Außerdem wird ein Methodenaufruf einer Übergangskomponente ignoriert .

Weitere Informationen finden Sie in unserer JavaScript-Dokumentation .

`.modal(options)`

Aktiviert Ihren Inhalt als Modal. Akzeptiert optionale Optionen object.

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

Schaltet ein Modal manuell um. Gibt an den Aufrufer zurück, bevor das Modal tatsächlich angezeigt oder ausgeblendet wurde (dh bevor das shown.bs.modaloder hidden.bs.modal-Ereignis eintritt).

$('#myModal').modal('toggle')

`.modal('show')`

Öffnet manuell ein Modal. Kehrt zum Aufrufer zurück, bevor das Modal tatsächlich gezeigt wurde (dh bevor das shown.bs.modalEreignis eintritt).

$('#myModal').modal('show')

`.modal('hide')`

Blendet ein Modal manuell aus. Gibt an den Aufrufer zurück, bevor das Modal tatsächlich ausgeblendet wurde (dh bevor das hidden.bs.modalEreignis eintritt).

$('#myModal').modal('hide')

`.modal('handleUpdate')`

Passen Sie die Position des Modals manuell an, wenn sich die Höhe eines Modals ändert, während es geöffnet ist (dh falls eine Bildlaufleiste angezeigt wird).

$('#myModal').modal('handleUpdate')

`.modal('dispose')`

Zerstört das Modal eines Elements.

Veranstaltungen

Die modale Klasse von Bootstrap macht einige Ereignisse verfügbar, um sich in die modale Funktionalität einzuklinken. Alle modalen Ereignisse werden am Modal selbst (dh am <div class="modal">) ausgelöst.

Ereignistyp	Beschreibung
show.bs.modal	Dieses Ereignis wird sofort ausgelöst, wenn die `show`Instanzmethode aufgerufen wird. Wenn es durch einen Klick verursacht wurde, ist das angeklickte Element als `relatedTarget`Eigenschaft des Ereignisses verfügbar.
gezeigt.bs.modal	Dieses Ereignis wird ausgelöst, wenn das Modal für den Benutzer sichtbar gemacht wurde (wartet auf den Abschluss der CSS-Übergänge). Wenn es durch einen Klick verursacht wurde, ist das angeklickte Element als `relatedTarget`Eigenschaft des Ereignisses verfügbar.
verstecken.bs.modal	Dieses Ereignis wird sofort ausgelöst, wenn die `hide`Instanzmethode aufgerufen wurde.
versteckt.bs.modal	Dieses Ereignis wird ausgelöst, wenn das Modal vollständig vor dem Benutzer ausgeblendet wurde (wartet auf den Abschluss der CSS-Übergänge).
hidePrevented.bs.modal	Dieses Ereignis wird ausgelöst, wenn das Modal angezeigt wird, sein Hintergrund ist `static`und ein Klick außerhalb des Modals oder ein Drücken der Escape-Taste mit der Tastaturoption oder `data-keyboard`auf gesetzt ausgeführt wird `false`.

$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})