¿Cómo puedo hacer que la ventana emergente modal desplace su contenido con la página?

Question

Tengo una ventana emergente modal y cuando carga contenidos que son más altos que la altura del navegador, no puedo desplazarme hacia abajo para ver el resto de la información. En cambio, el fondo puede desplazarse, pero la ventana emergente no.

En su lugar, me gustaría que la ventana emergente permanezca y cuando el usuario se desplace hacia arriba o hacia abajo, deje la ventana emergente en su lugar y deje que se desplace hasta el final de los contenidos. Si haces una publicación súper larga en Facebook, la ventana emergente funciona correctamente y me gustaría saber cómo puedo obtener el mismo efecto con este control.

Answer 1

Coloque el estilo overflow: auto en el bloque de contenedores.

Answer 2

En el CSS de su ventana emergente modal, establezca el ancho de la variable modal, luego configure overflow:auto. Eso te dará barra de desplazamiento horizontal. Ejemplo:

.ModalPopupPanel 
{ 
    width:900px; 
    overflow:auto; 
} 

Por lo tanto, cuando el ancho del contenido excede el 900px, la barra de desplazamiento horizontal se mostrará. Lo mismo es cierto para la barra de desplazamiento vertical donde necesita establecer la altura del modalpop.

Answer 3

Este script establece la altura emergente al 90% de la altura de la pantalla, luego puede establecer el desbordamiento: automático;

<script type="text/javascript"> 
    function pageLoad() { 
     $get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px"; 
    } 
    </script> 

aquí una pregunta relacionada que hago y la solución que encontré.

asp.net ModalPopupExtender : need to show scroll bar when overflow

Answer 4

Usted puede agregar una clase al cuerpo de la etiqueta cuando el emergente está abierta para ocultar la barra de desplazamiento, y lo quita cuando el emergente desaparece, entonces su fondo debe ser la posición: fijo y la altura debe ser window.height() (obténgalo dinámicamente con JS) y también overflow: automático.

Lo que sucede con todo eso es que, si la ventana emergente es más alta que el fondo, obtienes una bonita barra de desplazamiento a la derecha, y como la barra de desplazamiento del cuerpo está oculta, solo ves esa. Además, la página en sí misma no se desplaza. Así es como Facebook lo hace con su visor de imágenes.

Answer 5

Puede probar esto por desplazamiento ModalPopup con sus contens: Ajuste el PopupDragHandleControlID apuntando a un panel vacío, modo de ajuste Reposición = "None" esto mantendrá el modal fija en la misma posición mientras se desplaza la página.

Answer 6

Aquí la solución simple y mejor trabajo

añadir que la clase a su página emergente modal.

body.modal-open { 
 
overflow: auto; 
 
}