css - una - ventana modal responsive bootstrap

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

Question

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 desplace el diálogo cuando se muestra y que sea demasiado largo para caber en la pantalla, pero deje el cuerpo principal en su lugar detrás del modal. Si usas Trello, entonces sabes a lo que me refiero.

¿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 el momento:

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;
}

Answer 1

Al final, tuve que hacer cambios en el contenido de la página detrás de la pantalla modal para asegurarme de que nunca llegara a ser suficiente para desplazar la página.

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

Answer 2

Aquí ... Funciona perfectamente para mí

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

Answer 3

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

Modal demo de la ventana (ver comentarios en el código fuente HTML)

Todo hecho solo con HTML y CSS : no se necesita JS para visualizar y cambiar el tamaño de la ventana modal (pero aún así se necesita para mostrar la ventana del curso) . En la nueva versión, no necesita JS en absoluto.

Actualización (más demos):

• Ventana modal alineada a la parte superior

• Ventana Modal centrada

• Antigua demo que usa Javascript

El punto es tener DIVs externos e internos donde el exterior 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 */
}

Answer 4

Cambiar position

position:fixed;
overflow: hidden;

a

position:absolute;
overflow:scroll;

Answer 5

Esto es lo que me solucionó:

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

EDITAR : ahora uso el mismo método que se usa actualmente en Twitter, donde el modo modal actúa como una página separada sobre el contenido actual y el contenido detrás del modal no se mueve mientras 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 Pure JS (IE9 +): https://jsfiddle.net/0x0049/koodkcng/1/

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

Answer 6

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

1. Lugar modal en el centro de la pantalla
2. Si modal es más alto que la ventana gráfica, deslícese hacia abajo (no 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 desee. Eliminé mi ícono cercano de esto por simplicidad.

Answer 7

Solo usa

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

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

Answer 8

Ventana de la barra de desplazamiento de la página se puede hacer clic cuando Modal está abierto

Esta funciona para mí. Pure CSS.

<style type="text/css">
body.modal-open {
padding-right: 17px !important;
}
.modal-backdrop.in {
margin-right: 16px;
</style>

Pruébalo y hazmelo saber

Answer 9

el posicionamiento fijo por sí solo debería haber resuelto ese problema, pero otra buena solución para evitar este problema es colocar sus divisores 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 posición modal absoluta para permitir al usuario mantener 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>

Answer 10

position:fixed implica 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, teniendo esto en cuenta ¿por qué no agrega una barra de desplazamiento a la ventana modal en sí?

Si es así, corregir las propiedades de max-height y overflow debería hacer el truco.