Twitter Bootstrap 3 Modal con corpo scorrevole

Question

Mi sto spostando da Bootstrap 2 a Bootstrap 3. Nella versione precedente, stavo usando modali con contenuti lunghi, e le modali scorrevano automaticamente quando veniva raggiunta una determinata altezza massima.

In Bootstrap 3, il modale si estende solo per mostrare l'intero contenuto, e devo usare il tasto page down per arrivare effettivamente alla fine di esso e vedere i pulsanti nel modal footer. Non riesco a utilizzare la barra di scorrimento nell'estrema destra della finestra del browser, perché è coperta dallo sfondo e, in ogni caso, non sarebbe intuitivo scorrere solo il contenuto nella casella modale.

Come posso ottenere un modale bootstrap 3 che inserisce automaticamente una barra di scorrimento per scorrere i contenuti quando si raggiunge un'altezza massima?

ho provato a installare l'altezza massima per la classe modale, in questo modo:

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

Ma non funziona come previsto. La finestra modale raggiunge una dimensione massima, ma taglia solo il suo contenuto e il piè di pagina non viene nemmeno visualizzato.

Grazie per qualsiasi aiuto.

Answer 1

Basta aggiungere:

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

L'altezza può naturalmente essere adattati alle vostre esigenze personali.

Working Example

Aggiornamento:

In realtà è abbastanza facile. Basta aggiungere:

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

al tuo css.

Utilizza vh e calc, che ha anche un buon supporto per il browser (IE9 +).

Questo si basa su questo answer. Si prega di leggere lì per informazioni più dettagliate, non copierò la sua risposta.

Working Example

Answer 2

Sembra che tu stia descrivendo https://github.com/twbs/bootstrap/issues/14916 ("Modal overlay è al di sopra della barra di scorrimento "), che sarà fissato in Bootstrap v3.3.1 per https://github.com/twbs/bootstrap/pull/14927 (" Fix sfondo modale sovrapponendo barra di scorrimento del modali").

Answer 3

Se si dispone di contenuto dinamico questo può essere un dolore. L'ho usato per assicurarmi che avesse l'altezza corretta e poi scorresse:

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

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