Modal desplazable bootstrap de Twitter

Estoy usando twitter bootstrap para un proyecto en el que estoy trabajando.

Tengo una ventana modal que tiene una forma algo más larga y no me gustó que cuando la ventana se volvió demasiado pequeña, el modal no se desplazó (si simplemente desapareció de mi página, que no es desplazable).

Para solucionar esto, utilicé el siguiente CSS

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

Esto funciona exactamente como quiero en Chrome (es decir, el formulario es de tamaño completo cuando la ventana es lo suficientemente grande, pero a medida que la ventana se encoge, el modal se encoge y se vuelve desplazable). El problema es que en IE el modal está fuera de la pantalla. ¿Alguien tiene una mejor solución a este problema?

Mi ejemplo se puede encontrar en tinyhousemap.com (haga clic en 'Agregar una entrada al mapa' en la ventana de navegación para que aparezca el modal)

Gracias

¿Qué tal la siguiente solución? Funcionó para mí. Prueba esto:

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

Detalles:

1. eliminar overflow-y: auto;o overflow: auto;de la clase .modal (importante)
2. quitar max-height: 400px;de .modalclase (importante)
3. Agregar max-height: 400px;a .modal .modal-body (o lo que sea, puede ser 420pxo menos, pero no iría más que 450px)
4. Agregar overflow-y: auto;a.modal .modal-body

Listo, solo el cuerpo se desplazará.

He hecho una pequeña solución usando solo jQuery.

Primero, necesitas poner una clase adicional a tu <div class="modal-body">I llamado "ativa-scroll", por lo que se convierte en algo como esto:

<div class="modal-body ativa-scroll">

Así que ahora solo ponga este fragmento de código en su página, cerca de su carga JS:

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

¡Funciona perfectamente para mí, también de manera receptiva! :)

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Esto funciona para Bootstrap 3 sin código JS y responde.

Fuente

Intente anular los bootstrap:

 .modal {
position: fixed;

Con:

.modal {
position: absolute;

Funcionó para mí.

Yo también agregué

.modal { position: absolute; }

a la hoja de estilo para permitir que el diálogo se desplace, pero si el usuario se ha movido hacia la parte inferior de una página larga, el modal puede terminar oculto en la parte superior del área visible.

Entiendo que esto ya no es un problema en bootstrap 3, pero buscando una solución relativamente rápida hasta que actualizamos terminé con lo anterior más llamando a lo siguiente antes de abrir el modal

$('.modal').css('top', $(document).scrollTop() + 50);

Parece ser feliz en FireFox, Chrome, IE10 8 y 7 (los navegadores que tenía a mano)

Su modal está oculto en Firefox, y eso se debe a la declaración de margen negativo que tiene dentro de su hoja de estilo general:

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

Elimina el margen negativo y todo funciona bien.

En caso de usarlo .modal {overflow-y: auto;}, se crearía una barra de desplazamiento adicional a la derecha de la página, cuando el cuerpo ya está desbordado.

La solución para esto es eliminar el desbordamiento de la etiqueta del cuerpo temporalmente y establecer el desbordamiento modal -y en automático .

Ejemplo:

$('.myModalSelector').on('show.bs.modal', function () {

        // Store initial body overflow value
        _initial_body_overflow = $('body').css('overflow');

        // Let modal be scrollable
        $(this).css('overflow-y', 'auto');
        $('body').css('overflow', 'hidden');


    }).on('hide.bs.modal', function () {

        // Reverse previous initialization
        $(this).css('overflow-y', 'hidden');
        $('body').css('overflow', _initial_body_overflow);
});

El problema con la solución CSS de @ grenoult (que funciona, en su mayoría), es que responde completamente y en el móvil cuando aparece el teclado (es decir, cuando hacen clic en una entrada en el cuadro de diálogo modal), el tamaño de la pantalla cambia y el cuadro de diálogo modal el tamaño cambia y puede ocultar la entrada en la que acaban de hacer clic para que no puedan ver lo que están escribiendo.

La mejor solución para mí fue usar jquery de la siguiente manera:

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

No responde al cambio del tamaño de la ventana, pero eso no sucede con tanta frecuencia de todos modos.

Pude superar esto usando la métrica "vh" con max-height en el elemento .modal-body. 70vh parecía adecuado para mis usos. Luego, configure el overflow-y en auto para que solo se desplace cuando sea necesario.

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}

Nada de esto funcionará como se esperaba. La forma correcta es cambiar de posición: fijo a posición: absoluto para la clase .modal