it-swarm.com.de

So richten Sie modulare Dialogfelder von Bootstrap v4 vertikal aus

Modale Dialoge in Bootstrap 4 vertikal zentrieren. 

Hinweis: Die folgenden Anforderungen wurden hinzugefügt, um klar zu machen, dass ich nach einem proper - Verfahren suche, um ein Bootstrap-Modal vertikal zu zentrieren und alle möglichen Fälle auf alle möglichen Fälle abzudecken Geräte in allen Browsern. In meinem Fall wollte ich, dass ein großes SPA dasselbe Modal in der App wiederverwendet, also musste es in jedem Fall funktionieren.

Es sollte:

  • halten Sie modale Inhalte auf allen Geräten verfügbar, auch wenn diese die Gerätehöhe überschreiten
  • auf jedem Gerät + Browser-Kombination arbeiten, deren Marktanteil größer als 1% ist
  • display:table-cell oder ähnliche Hacks nicht verwenden (Layouttechniken, die nicht für das Layouting gedacht sind)
  • schließen Sie click oder tap an einer beliebigen Stelle außerhalb von .modal-content (einschließlich oben und unten).
  • beschränken Sie die Verwendung von jQuery/JavaScript so weit wie möglich
  • (optional) Arbeiten Sie an Standard-Bootstrap-Beispielen, ohne dass Änderungen an markup erforderlich sind
16

Update ab Beta 3 [docs] :

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


Ursprüngliche Antwort:

SCSS:

.modal-dialog {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  @media(max-width: 768px) {
    min-height: calc(100vh - 20px);
  }
}

oder unpräfixiertCSS:

.modal-dialog {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}
@media(max-width: 768px) {
  .modal-dialog {
    min-height: calc(100vh - 20px);
  }
}

Anmerkung 1: Bitte beachten Sie vollständig vorangestellt CSS wird mit der Unterstützung bestimmter Browser für bestimmte Eigenschaften allmählich überflüssig. Der richtige Weg, um das aktualisierte CSS mit Präfix zu erhalten, ist:

  • kopieren Sie das unpräfixierte CSS in Autoprefixer .
  • setzen Sie den Filter im unteren Feld auf die gewünschte Einstellung (für die Unterstützung des Browsers verwenden Sie > 0%).
  • holen Sie sich den neuesten Code aus der Box auf der rechten Seite .

Note 2: Diese Antwort wurde in frühen Stadien von v4 (alpha 3 oder 4) hinzugefügt, das sich derzeit in beta befindet. Sie können den CSS-Teil dieser Antwort sicher ersetzen, indem Sie .modal-dialog die folgenden Klassen hinzufügen: 

h-100 d-flex flex-column justify-content-center my-0

..., wie @Androbaut in dem Kommentar unten ausgeführt hat. Sie benötigen weiterhin JavaScript (siehe unten), um das modale Fenster unter click tap unter/über dem modalen Fenster zu schließen.


jQuery (erforderlich zum Schließen von Modal bei Klick/Tipp oben/unten):

$('.modal-dialog').on('click tap', function(e){
  if ($(e.target).hasClass('modal-dialog')) {
    $('.modal').modal('hide');
  }
})

Das ist es.


Funktionsauszug, vollständig vorangestelltes CSS und Markup mit unterschiedlichen Modalgrößen:

$('.modal-dialog').on('click tap', function(e){
  if ($(e.target).hasClass('modal-dialog')) {
  	$('.modal').modal('hide');
  }
})
.modal-dialog {
  min-height: -webkit-calc(100vh - 60px);
  min-height: -moz-calc(100vh - 60px);
  min-height: calc(100vh - 60px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: auto; 
}
@media (max-width: 768px) {
  .modal-dialog {
    min-height: -webkit-calc(100vh - 20px);
    min-height: -moz-calc(100vh - 20px);
    min-height: calc(100vh - 20px);   
  }
}

/* you don't need the CSS below this line. It's mainly cosmetic and for aligning the modal launch buttons */

.modal-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
.modal-content > * {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
     -moz-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; 
}
.modal-content > *.modal-body {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
     -moz-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; 
}

#Modal_2 .modal-content {
  min-height: 50vh; 
}

#Modal_3 .modal-content {
  min-height: 85vh; 
}

#Modal_4 .modal-content {
  min-height: 200vh; 
}

.full-page-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100vh; 
}
.full-page-center button {
  margin: 15px; 
}
@media (max-width: 768px) {
  .full-page-center {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;   
  }
  .full-page-center button {
    display: block;
    min-width: 100%;
    margin: 10px 15px;
  }
  .full-page-center::after {
    display: none;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
       -moz-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>


<div class="container full-page-center">
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal_1">
    Tiny modal
  </button>
  <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#Modal_2">
    Normal modal
  </button>
  <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#Modal_3">
    Large modal
  </button>
  <button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal_4">
    Very large modal
  </button>
</div>
<div class="modal fade" id="Modal_1" tabindex="-1" role="dialog" aria-labelledby="modalLabel_1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="modalLabel_1">Tiny modal</h4>
      </div>
      <div class="modal-body">
        I am cute...
      </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>
<div class="modal fade" id="Modal_2" tabindex="-1" role="dialog" aria-labelledby="modalLabel_2" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="modalLabel_2">Dull modal</h4>
      </div>
      <div class="modal-body">
        I am normal...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Some action</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="Modal_3" tabindex="-1" role="dialog" aria-labelledby="modalLabel_3" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="modalLabel_3">Don't call me fat</h4>
      </div>
      <div class="modal-body">
        Call me "oversized".
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-success">Some action</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="Modal_4" tabindex="-1" role="dialog" aria-labelledby="modalLabel_4" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="modalLabel_4">Huge modal</h4>
      </div>
      <div class="modal-body">
        Comments, anyone?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-warning">Some action</button>
      </div>
    </div>
  </div>
</div>

Wenn Sie Fehler oder Mängel finden, lass es mich wissen. Ich werde mir die Zeit nehmen, die Antwort zu verbessern und nützlich zu halten. Hilfe bei dieser Aufgabe ist willkommen.

51

Hier ist ein einfacher Flexbox-Ansatz.

SCSS

.modal-open .modal {
    display: flex!important;
    align-items: center!important;
    .modal-dialog {
        flex-grow: 1;
    }
}

Arbeitsdemo

7
Surjith S M

Es gibt eine viel einfachere Möglichkeit, dies zu erreichen, ohne ein paar CSS-Überschreibungen oder ein anderes benutzerdefiniertes CSS schreiben zu müssen. Im Wesentlichen werden nur die Standard-Bootstrap-Klassen verwendet und ein zusätzliches HTML-Element hinzugefügt, um die Höhe zu steuern. 

CSS (nicht erforderlich, siehe unten)

.modal > .row{
    flex: 1;
}

HTML (aktualisiert siehe unten)

<div id="dialogBox" class="modal fade d-flex">
    <div class="row justify-content-center"> <!-- Vertically Align Modal -->
        <div class="modal-dialog align-self-center" role="document">
            <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-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

Dann zu verwenden:


JS

$("#dialogBox").modal('show');

ODER HTML

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dialogBox">
  Launch demo modal
</button>

Es gibt wahrscheinlich eine Möglichkeit, das gewünschte Ergebnis nur mit den Bootstrap-Klassen .row, .col und flex-XXX zu erzielen, aber ich konnte das nicht zum Laufen bringen. 

Noch eine letzte Anmerkung: Möglicherweise müssen Sie Folgendes hinzufügen: <body class="d-flex">, damit abhängig vom Rest Ihres CSS alles funktioniert.

AKTUALISIEREN


Es gibt eine Möglichkeit, dies zu erreichen, indem nur die Bootstrap-Klassen h-100 und w-100 verwendet werden:

<div id="dialogBox" class="modal fade d-flex">
    <div class="row justify-content-center w-100"> <!-- Vertically Align Modal -->
        <div class="modal-dialog align-self-center" role="document">
            <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-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
1
Andy Braham

Fügen Sie einfach die Klasse "Modal-Dialog-Centered" zusammen mit dem Modelldialog wie unten beschrieben hinzu

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
 <button class="btn btn-success" data-toggle="modal" data-target="#MyModal">Launch Modal</button>     
<div class="modal align-middle" id="MyModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal Title</h5>
                <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">Lorem Ipsum is simply dummy text of the                        printing and typesetting industry</div> 
            <div class="modal-footer">
                <button class="btn btn-info" data-dismiss="modal">Close</button>
            </div>                
        </div>
    </div>
</div>
1
Muthu Prasanth

Fügen Sie .modal-Dialog zentriert zum .modal-Dialog hinzu, um den Modal vertikal zu zentrieren.

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

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>
1
Zoha Irshad

Diese Lösung funktioniert für kleine und lange Modale, für die ein Bildlauf erforderlich ist.

Fügen Sie diese benutzerdefinierten CSS-Regeln hinzu:

.modal-header {
  flex-shrink: 0;
}

.modal-body {
  overflow-y: auto;
}

Und fügen Sie diese Klassen hinzu:

  • Zu modal-dialog: h-100 my-0 mx-auto d-flex flex-column justify-content-center
  • Zu modal-content: m-2

So was:

<div class="modal-dialog h-100 my-0 mx-auto d-flex flex-column justify-content-center" role="document">
  <div class="modal-content m-2">
     ...
  </div>
</div>
1
Mikel

Wenn Sie der Klasse '. Modal-dialog' das folgende CSS hinzufügen, funktioniert es einwandfrei für mich. Sie können die benutzerdefinierte CSS-Klasse auch überschreiben.

.modal-dialog {
      height: 100vh;
      display: flex;
      align-items: center;
}
0

Eine weitere einfache Möglichkeit, um Ihre modale vertikale Ausrichtung vorzunehmen, besteht darin, top: 50%;, transform: translateY(-50%); und margin: 0 auto an die modale Dialogklasse anzupassen.

Edit: Der Nachteil ist, dass Sie auch max-height: 100vh; auf .modal-content setzen müssen. Andernfalls ist die Oberseite von Modal nicht mehr zugänglich, wenn Ihr Modal höher wird als der Darstellungsbereich.

Demo:

.modal.vertically-modal .modal-dialog {
  transform: translateY(-25%);
  top: 50%;
  margin: 0 auto;
}

.modal.vertically-modal.show .modal-dialog {
  transform: translateY(-50%);
}

.modal-content {
  max-height: 100vh;
  overflow-y: auto;
  padding: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js "></script>

<button class="btn btn-primary" data-toggle="modal" data-target=".vertically-modal">Show modal</button>

<div class="modal fade vertically-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      Vertically modal
    </div>
  </div>
</div>

0
NiZa