webentwicklung-frage-antwort-db.com.de

Twitter Bootstrap 3 Modal mit scrollbarem Körper

Ich wechsle von Bootstrap 2 zu Bootstrap 3. In der alten Version habe ich Modals mit langem Inhalt verwendet, und die Modals wurden automatisch gescrollt, wenn eine bestimmte maximale Höhe erreicht wurde.

In Bootstrap 3 wird der Modalwert so erweitert, dass der gesamte Inhalt angezeigt wird, und ich muss die Abwärtspfeiltaste verwenden, um tatsächlich an das Ende des Modals zu gelangen und die Schaltflächen in der modalen Fußzeile zu sehen. Ich kann die Bildlaufleiste ganz rechts im Browserfenster nicht verwenden, da sie durch den Hintergrund verdeckt ist. In jedem Fall wäre es nicht intuitiv, nur den Inhalt der modalen Box zu scrollen.

Wie kann ich in Bootstrap 3 eine Modalität erreichen, die automatisch eine Bildlaufleiste einfügt, um den Inhalt zu scrollen, wenn eine maximale Höhe erreicht ist? 

Ich habe versucht, die maximale Höhe für die modale Klasse einzustellen:

.modal{
   max-height:80%;
}
.modal-header{
   height:15% !important;    
}
.modal-body{
   height:70%;
   overflow:auto;
}
.modal-footer{
   height:15%;
}

Aber es funktioniert nicht wie erwartet. Das modale Fenster erreicht zwar eine maximale Größe, schneidet dort aber nur den Inhalt ab und die Fußzeile wird nicht einmal angezeigt.

Danke für jede Hilfe.

21
Vero

Einfach hinzufügen:

.modal-content {
  height:250px;
  overflow:auto;
}

Die Höhe kann natürlich an Ihre persönlichen Bedürfnisse angepasst werden.

Arbeitsbeispiel

Update:

Das ist eigentlich ziemlich einfach. Einfach hinzufügen:

.modal-body {
    max-height: calc(100vh - 212px);
    overflow-y: auto;
}

zu deiner css.

Es verwendet vh und calc , die ebenfalls eine gute Browserunterstützung haben (IE9 +).

Dies basiert auf dieser Antwort . Bitte lesen Sie dort für genauere Informationen, ich werde seine Antwort nicht kopieren.

Arbeitsbeispiel

71
Sebsemillia

Wenn Sie dynamischen Inhalt haben, kann dies ein Schmerz sein. Ich habe dies verwendet, um sicherzustellen, dass es die richtige Höhe hat und dann scrollen würde:

$('#modal').on('shown.bs.modal', function () {
  $('.modal-dialog').css('height', $('.modal-dialog').height() );
});

$('#modal').on('hidden.bs.modal', function () {
  $('.modal-dialog').css('height', 'auto');
});
2
unclejam

Anscheinend beschreiben Sie https://github.com/twbs/bootstrap/issues/14916 ("Modales Overlay befindet sich über der Bildlaufleiste"), das in Bootstrap v3.3.1 von https: // behoben wird. github.com/twbs/bootstrap/pull/14927 ("Modalen Hintergrund über der Bildlaufleiste des Modals fixieren").

0
cvrebert