jquery - color - ¿Cómo ocultar la barra de desplazamiento del cuerpo cuando se muestra el diálogo modal?

jquery css multiple

Question

Mi página de inicio tiene mucho contenido. Cuando creo un cuadro de diálogo modal, la barra de desplazamiento del contenido del cuerpo está visible y cuando nos desplazamos, se desplaza hacia la parte inferior de la página.

En el diálogo también tengo que mostrar mucho contenido. Entonces, si puedo ocultar la barra de desplazamiento del cuerpo y mostrar solo los medios de la barra de desplazamiento modal, sería una experiencia agradable para el usuario.

La idea es, cuando se muestra un diálogo modal y un poco de contenido desplazable encima de él, deshabilitar la barra de desplazamiento de la página principal y mostrar solo la barra de desplazamiento para el div modal actualmente visible.

¿Qué tengo que hacer para ocultar la barra de desplazamiento del contenido del cuerpo y mostrar uno en el div modal?

Mi lado del cliente está lleno de JavaScript y jQuery.

Cualquier sugerencia sería apreciativa!

Answer 1

Cuando usé $(''body'').css(''overflow'',''scroll'') o $(''body'').css(''overflow'', ''inherit'') la barra de desplazamiento no apareció en la esquina derecha del navegador Ventana, pero en el borde del contenedor de la página ...

Sé que este problema se debe a los estilos de diseño y CSS del sitio en particular, pero en este caso, cambiar el estilo de la etiqueta html parece ser más universal:

• $(''html'').css(''overflow'',''hidden''); - ocultar barra de desplazamiento
• $(''html'').css(''overflow'',''scroll''); - Mostrar barra de desplazamiento

Answer 2

Si envuelve todo el contenido de su cuerpo en un div envoltorio con overflow: hidden , puede establecer dinámicamente la altura de ese div igual a la altura de la ventana gráfica cuando abre el cuadro de diálogo modal.

Answer 3

puede agregar esto en bootstrap.js

Línea: 421

 this.$element.hide(), this.backdrop(function() {
a.$body.removeClass("modal-open"),$(''html'').css(''overflow'',''scroll''), a.resetAdjustments(), a.resetScrollbar(), a.$element.trigger("hidden.bs.modal")
})

Línea: 397

this.$element.trigger(e), this.isShown || e.isDefaultPrevented() || (this.isShown = !0, this.checkScrollbar(), this.setScrollbar(), this.$body.addClass("modal-open"), this.escape(), this.resize(), $(''html'').css(''overflow'',''hidden''), this.$element.on("click.dismiss.bs.modal", ''[data-dismiss="modal"]'', a.proxy(this.hide, this)), this.backdrop(function()

Answer 4

Agregue $(''body'').css(''overflow'',''hidden'') a su función que muestra el modal, y $(''body'').css(''overflow'',''scroll'') a su función que cierra el modal.