Modal Bootstrap 4

Die Modal-Komponente ist ein Dialogfeld / Popup-Fenster, das über der aktuellen Seite angezeigt wird:

Wie erstellt man ein Modal

Das folgende Beispiel zeigt, wie ein Basismodal erstellt wird:

<!-- Button zum offnen des Modals -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Offne Modal
</button>

<!-- Das Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Kopfzeile -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Kopfzeile</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal Inhalt -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Schließen</button>
      </div>

    </div>
  </div>
</div>

Modal Größe

Modal klein (small)
<div class="modal-dialog modal-sm">
Modal groß (large)
<div class="modal-dialog modal-lg">

Modal Standard (default)

Lässt man beide Klassen weg wird das Modal in der Standard-Größe gezeigt.

Modal zentrieren

Zentrieren Sie das Modal vertikal und horizontal innerhalb der Seite mit der Klasse .modal-dialog-centred

<div class="modal-dialog modal-dialog-centered">

Modal animieren

Verwendet man die Klasse .fade, wird beim Öffnen und Schließen des Modals einen Fading-Effekt hinzuzufügen:

<!-- Fading Modal -->
<div class="modal fade"></div>

<!-- Modal ohne Animation -->
<div class="modal"></div>

Grid in Modal benutzen

Nutzen Sie das Bootstrap-Grid-System in einem Modal, indem Sie .container-fluid im .modal-body benutzen. Verwenden Sie dann die normalen Grid-Systemklassen wie sonst auch.

Beispiel
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Modal Grid</h4>
            <button type="button" class="close" data-dismiss="modal"><span>�</span></button>
        </div>
        <div class="modal-body">
            <div class="container-fluid bd-example-row">
                <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>