css - que - modal html

Twitter Bootstrap 3 modal con cuerpo desplazable

Question

Me estoy moviendo de Bootstrap 2 a Bootstrap 3. En la versión anterior, usaba modales que tenían contenido largo, y los modales se desplazaban automáticamente cuando se alcanzaba una altura máxima determinada.

En Bootstrap 3, el modal se extiende para mostrar todo el contenido, y tengo que usar la tecla de página hacia abajo para llegar al final y ver los botones en el pie de página modal. No puedo usar la barra de desplazamiento en el extremo derecho de la ventana del navegador, porque está cubierto por el fondo y, en cualquier caso, no sería intuitivo desplazar solo el contenido en el cuadro modal.

¿Cómo puedo lograr un modal en bootstrap 3 que inserta automáticamente una barra de desplazamiento para desplazarse por el contenido cuando se alcanza una altura máxima?

Intenté establecer la altura máxima para la clase modal, así:

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

Pero no funciona como se esperaba. La ventana modal alcanza un tamaño máximo, pero simplemente corta su contenido allí y el pie de página no se muestra.

Gracias por cualquier ayuda.

Answer 1

Parece que está describiendo https://github.com/twbs/bootstrap/issues/14916 ("La superposición modal está por encima de la barra de desplazamiento"), que se solucionará en Bootstrap v3.3.1 en https://github.com/twbs/ bootstrap / pull / 14927 ("Fix modal backdrop overlaying la barra de desplazamiento modal").

Answer 2

Si tienes contenido dinámico, esto puede ser un problema. Lo usé para asegurarme de que tenía la altura correcta y luego se desplazaba:

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

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

Answer 3

Solo agrega:

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

La altura puede, por supuesto, adaptarse a sus necesidades personales.

Ejemplo de trabajo

Actualizar:

En realidad es bastante fácil. Solo agrega:

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

a tu css.

Utiliza vh y calc , que también tienen un buen soporte para el navegador (IE9 +).

Esto se basa en esta respuesta . Por favor, lea allí para obtener información más detallada, no copiaré su respuesta.

Ejemplo de trabajo