¿Cómo desplazar la página cuando un diálogo modal es más largo que la pantalla?

Tengo un diálogo modal en mi aplicación que puede ser bastante largo en la dirección y. Esto introduce un problema por el cual parte del contenido del diálogo se oculta en la parte inferior de la página.

Me gustaría que la barra de desplazamiento de la ventana desplazara el cuadro de diálogo cuando se muestra y es demasiado larga para caber en la pantalla, pero deja el cuerpo principal en su lugar detrás del modal. Si usa Trello, entonces sabe lo que estoy buscando.

¿Es esto posible sin usar JavaScript para controlar la barra de desplazamiento?

Aquí está el CSS que he aplicado a mi modal y diálogo hasta ahora:

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}

Solo usa

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

organizará su modal y luego le dará un desplazamiento vertical

Esto es lo que lo arregló para mí:

max-height: 100%;
overflow-y: auto;

EDITAR : Ahora uso el mismo método que se usa actualmente en Twitter, donde el modal actúa como una página separada en la parte superior del contenido actual y el contenido detrás del modal no se mueve a medida que se desplaza.

En esencia, es esto:

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

Con este CSS en el modal:

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Versión de JS puro (IE9 +): https://jsfiddle.net/0x0049/koodkcng/1/

Esto funciona sin importar la altura o el ancho de la página o el cuadro de diálogo modal, permite el desplazamiento sin importar dónde esté el mouse / dedo, no tiene el salto discordante que tienen algunas soluciones que deshabilitan el desplazamiento en el contenido principal y también se ve genial.

Cambio position

position:fixed;
overflow: hidden;

a

position:absolute;
overflow:scroll;

Aquí está mi demostración de la ventana modal que cambia automáticamente de tamaño a su contenido y comienza a desplazarse cuando no se ajusta a la ventana.

Demostración de la ventana modal (ver comentarios en el código fuente HTML)

Todo hecho solo con HTML y CSS , no se requiere JS para mostrar y cambiar el tamaño de la ventana modal (pero aún lo necesita para mostrar la ventana, por supuesto , en la nueva versión no necesita JS en absoluto).

Actualización (más demostraciones):

• Ventana modal alineada hacia arriba

• Ventana modal centrada

• Demostración antigua que usa Javascript

El punto es tener DIV externos e internos donde el externo define la posición fija y el interno crea el desplazamiento. (En la demostración, en realidad hay más DIV para que se vean como una ventana modal real).

        #modal {
            position: fixed;
            transform: translate(0,0);
            width: auto; left: 0; right: 0;
            height: auto; top: 0; bottom: 0;
            z-index: 990; /* display above everything else */
            padding: 20px; /* create padding for inner window - page under modal window will be still visible */
        }

        #modal .outer {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 999;
        }

        #modal .inner {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: auto;       /* allow to fit content (if smaller)... */
            max-height: 100%;   /* ... but make sure it does not overflow browser window */

            /* allow vertical scrolling if required */
            overflow-x: hidden;
            overflow-y: auto;

            /* definition of modal window layout */
            background: #ffffff;
            border: 2px solid #222222;
            border-radius: 16px; /* some nice (modern) round corners */
            padding: 16px;       /* make sure inner elements does not overflow round corners */
        }

El posicionamiento fijo solo debería haber solucionado ese problema, pero otra buena solución para evitar este problema es colocar sus divs o elementos modales en la parte inferior de la página, no dentro del diseño de su sitio. La mayoría de los complementos modales dan su posicionamiento modal absoluto para permitir que el usuario mantenga el desplazamiento de la página principal.

<html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>

Aquí ... funciona perfectamente para mí

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

manera simple de hacer esto agregando este CSS Entonces, acaba de agregar esto a CSS:

.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}

¡y está funcionando!

position:fixedimplica que, bueno, la ventana modal permanecerá fija en relación con el punto de vista. Estoy de acuerdo con su evaluación de que es apropiado en este escenario, con eso en mente, ¿por qué no agrega una barra de desplazamiento a la ventana modal?

Si es así, corregir max-heighty overflowpropiedades deben hacer el truco.

Al final, tuve que hacer cambios en el contenido de la página detrás de la pantalla modal para asegurarme de que nunca fuera lo suficientemente larga como para desplazarse por la página.

Una vez que hice eso, los problemas que encontré al aplicar position: absoluteal cuadro de diálogo se resolvieron ya que el usuario ya no podía desplazarse hacia abajo en la página.

Se puede hacer clic en la barra de desplazamiento de la página de la ventana cuando Modal está abierto

Esta funciona para mí. CSS puro.

<style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

Pruébalo y házmelo saber

Quería agregar mi respuesta CSS pura a este problema de modales con ancho y alto dinámicos. El siguiente código también funciona con los siguientes requisitos:

1. Coloque modal en el centro de la pantalla
2. Si modal es más alto que la ventana gráfica, desplaza el atenuador (no el contenido modal)

HTML:

<div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

CSS / MENOS:

.modal {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @qquad;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: @zindex-modal;

    &__content {
        width: 900px;
        margin: auto;
        max-width: 90%;
        padding: @quad;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }
}

De esta manera, el modal siempre está dentro de la ventana gráfica. El ancho y la altura del modal son tan flexibles como quieras. Eliminé mi icono de cierre de esto por simplicidad.