Twitter Bootstrap 3 Modal z przewijanym ciałem

Question

Przechodzę z Bootstrap 2 do Bootstrap 3. W starej wersji korzystałem z modów, które miały długą zawartość, a modały automatycznie przewijano po osiągnięciu maksymalnej wysokości.

W Bootstrap 3, modal rozszerza się tak, aby pokazać całą zawartość, a ja muszę użyć klawisza w dół strony, aby dostać się do końca i zobaczyć przyciski w stopce modalnej. Nie mogę użyć paska przewijania z prawej strony okna przeglądarki, ponieważ jest on zakryty tłem, a w żadnym wypadku nie jest intuicyjne przewijanie zawartości w polu modalnym.

Jak uzyskać modal w bootstrapie 3, który automatycznie wstawia pasek przewijania, aby przewijać zawartość po osiągnięciu maksymalnej wysokości?

Próbowałem ustawienie wysokości max do modalnej klasy tak:

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

Ale to nie działa zgodnie z oczekiwaniami. Okno modalne osiąga maksymalny rozmiar, ale po prostu obcina jego zawartość, a stopka nie jest wyświetlana.

Dzięki za pomoc.

Answer 1

Wystarczy dodać:

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

Wysokość może być oczywiście dostosowane do własnych potrzeb.

Working Example

Aktualizacja:

To rzeczywiście dość łatwe. Po prostu dodaj:

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

do twojego css.

Używa vh i calc, które również mają dobrą obsługę przeglądarki (IE9 +).

To jest oparte na tym answer. Proszę przeczytać tam, aby uzyskać bardziej szczegółowe informacje, nie będę kopiować jego odpowiedzi.

Working Example

Answer 2

Wydaje się, że opisując https://github.com/twbs/bootstrap/issues/14916 („modalne nakładki jest powyżej przewijania«), który zostanie ustalony w Bootstrap v3.3.1 przez https://github.com/twbs/bootstrap/pull/14927 (»Fix modalne tło nakładanie przewijania modalnego za”).

Answer 3

Jeśli masz treści dynamiczne, może to być uciążliwe. Użyłem tego, aby upewnić się, że ma odpowiednią wysokość, a następnie będzie przewijane:

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

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