angularjs - div - Cómo evitar el desplazamiento del contenido del cuerpo cuando se abre bootstrap modal

ng-hide

Question

Estoy usando la caja Modular Bootstrap de UI Angular. Cuando el modal se abre el cuerpo tiene un desplazamiento. Cuando me desplazo el contenido detrás del modal también se desplaza.

Puedo configurar el desbordamiento: oculto en la etiqueta del cuerpo y esto resuelve el problema. Sin embargo, si tengo mucho contenido dentro de mi modal, necesito un desplazamiento para mostrar. Este desplazamiento no debe estar dentro del modal, es decir, cuando uso el desplazamiento de página, el modal solo debe desplazarse y no el contenido. Plunker aquí

Answer 1

Acabo de poner debajo de CSS y ahora el desplazamiento del cuerpo está oculto cada vez que se abre la ventana emergente modal. Estoy usando Bootstrap de interfaz de usuario angular.

.modal-open {
  overflow: hidden !important;
  position: relative
}

Answer 2

Cuando agrega overflow: hidden, el desplazamiento de la página de fondo está oculto. Sin embargo, el desplazamiento modal será visible como el desplazamiento de la página y el modal se configurará para desplazarse.

body.modal-open {
    overflow: hidden;
}

Answer 3

En bootstrap js commented line causa el problema, puedes comentar esta línea como lo hago yo.

  this.backdrop(function () {
  var transition = $.support.transition && that.$element.hasClass(''fade'')

  if (!that.$element.parent().length) {
    that.$element.appendTo(that.$body) // don''t move modals dom position
  }

  that.$element
    .show()
    .scrollTop(0)

  if (that.options.backdrop) that.adjustBackdrop()
  that.adjustDialog()

  if (transition) {
    that.$element[0].offsetWidth // force reflow
  }

  that.$element
    .addClass(''in'')
    .attr(''aria-hidden'', false)

  //that.enforceFocus()

Answer 4

Para aquellos que usan Angular JS y UI Bootstrap. Esto es lo que me tomó para que funcione. Mi situación fue un poco diferente. Tuve un modal que funcionó y se desplazó muy bien. Entonces tuve un botón en ese modal que haría estallar otro modal. Una vez que se cerró ese segundo modal, el modal inicial ya no se desplazaría. Esto es todo lo que tomó:

.modal.in {
  overflow-x: hidden;
  overflow-y: auto;
}

Answer 5

Para mí, la página se desplazó cuando se estaba cerrando el diálogo, así que arreglé el archivo ui-bootstrap-tpls.js. El problema real es que al descartar el modal, se llama a removeModalWindow con los parámetros ''modalInstance'' y ''modalWindow.value.modalOpener''.

El segundo parámetro se está utilizando para centrarse en el elemento que activó la ventana modal. Simplemente elimine el segundo parámetro en ''descartar'' y ''cerrar función'' y se resolverá el efecto de desplazamiento de página.

''removeModalWindow (modalInstance, modalWindow.value.modalOpener)'' se convierte en ''removeModalWindow (modalInstance)''

Answer 6

Una ligera modificación de la respuesta de Dreamhigh que funcionó bien para mí incluyó agregar posición: corregida para dispositivos iOS:

body.modal-open {
    position: fixed;
    overflow: hidden;
}

Además, se ajusta la ventana gráfica para inhabilitar la escala del usuario para evitar que las entradas se amplíen automáticamente y presenten barras de desplazamiento en el contenido del cuerpo:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Crédito para esta publicación: Bootstrap 3: barra de desplazamiento horizontal en iPhone después del enfoque de formulario

Con estos dos cambios pude conseguir que los formularios modales de angularjs se comporten bien en iOS.

Answer 7

Estoy enfrentando el mismo problema en realidad, usando UI Bootstrap, y se me ocurrió una especie de solución. Al abrir el modal, agrega una clase ( .ovh ) al cuerpo, que establece el desbordamiento en oculto. Al cerrar / descartar el modal, quita esa clase, para que el desplazamiento sea posible nuevamente.

Vea mi tenedor de su violín aquí: http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview

Tenga en cuenta que he colocado la clase en el index.html, solo para fines de demostración. Además, inyecté $document en la definición del controlador, para usar la referencia proporcionada por angular.