twitter-bootstrap - example - modal bootstrap ejemplos
Twitter bootstrap 3 modal en temas de desplazamiento móvil (7)
Actualmente estoy usando Twitter Bootstrap 3 modal en el móvil. Funciona perfectamente bien en el escritorio, sin embargo en el móvil, siempre que me desplazo, también se desplaza la ventana detrás del modal. ¿Cómo evito que esto suceda?
Curiosamente, abordan esto en los documentos sin ofrecer mucho en la forma de una solución:
"El soporte para el desbordamiento: oculto en el elemento <body> es bastante limitado en iOS y Android. A tal fin, cuando se desplaza por la parte superior o inferior de un modal en cualquiera de los navegadores de esos dispositivos, comenzará el contenido de <body> para desplazarse."
http://getbootstrap.com/getting-started/#overflow-and-scrolling
Hola chicos, así que creo que encontré una solución para Bootstrap 3. Esto está funcionando para mí en iPhone y Android en este momento. Es una mezcla de horas y horas de búsqueda, lectura y prueba. Entonces, si ves partes de tu código aquí, el crédito va para ti jajaja.
@media only screen and (max-device-width:768px){
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}
body {
overflow-x: hidden;
overflow-y: scroll !important;
}
La razón por la que el contenido específico de los medios está allí es en un escritorio con el que tuve problemas cuando el modal abriría todo el contenido de la página que se desplazaría de centrado a la izquierda. Parecía una mierda. Por lo tanto, esto se dirige a dispositivos de tamaño de tableta en los que tendría que desplazarse. Todavía hay un ligero cambio en el móvil y la tableta, pero realmente no es mucho. Déjame saber si esto funciona para ustedes. Esperemos que esto ponga el clavo en el ataúd.
Me he dado cuenta de que solo se desplaza por la página de fondo cuando está en el modo de desplazamiento y usted toca la parte inferior del modo, luego, si intenta seguir desplazándose hacia abajo, se desplaza por la página de fondo. Mire a la barra de desbordamiento del lado derecho, que solo se ve cuando el modal está abierto (en Chrome-Android)
Parece que el efecto es desplazar el modal hasta el punto de modal, y luego desplazar automáticamente la página de fondo aunque el modal aún esté abierto.
Para Bootstrap 3
Encontré una solución para dispositivos móviles (pantalla táctil) con iscroll.js
En el contenido del modal se añade:
<div id="smartScroll"> Content of the modal </div>
Inicializar en .js
var myScroll = new IScroll(''#smartScroll'', {
mouseWheel: true,
scrollbars: true,
click: true
});
Sí, esto fue muy molesto cuando me encontré con este problema en mi iPhone 6s hoy.
Esto todavía parece ser un problema, incluso con el último bootstrap ( 3.3.6 en mi momento).
Solución CSS Quickfix :
body.modal-open { position: fixed; }
"Tenga en cuenta que esto tiene el efecto secundario de" desplazarse "hacia la parte superior de la página mientras el modal está abierto".
Ver más detalles sobre esta solución here
Solución Javascript / jQuery :
Una mejor solución sería utilizar los eventos modales de bootstrap . Esta solución integra el método de corrección rápida, pero soluciona el problema de "principio de página". A continuación, puede modificar el css según sea necesario en función del evento.
En mi código a continuación, establezco la posición actual de la ventana en el evento show.bs.modal (este valor se usa para solucionar el problema de ''revisión rápida'').
Luego aplico la solución rápida css en el evento shown.bs.modal . En otras palabras, después de que el modal aparece.
Finalmente, cuando el modal está cerrado, cambio la posición del cuerpo a relativa (creo que también se puede establecer como estática) y desplazo la ventana a su posición original.
// set current position
var cPosition = false;
$(''.modal'').on(''show.bs.modal'', function(){
cPosition = $(window).scrollTop();
})
.on(''shown.bs.modal'', function(){
$(''body'').css({
position:''fixed''
});
})
.on(''hide.bs.modal'', function(){
$(''body'').css({
position:''relative''
});
window.scrollTo(0, cPosition);
});
Debe ser relativamente sencillo de configurar para cualquier persona con alguna experiencia en javascript.
Esperamos que resuelvan este problema en bootstrap 4, pero hasta entonces, espero que esta respuesta ayude a otras personas con problemas similares.
PARA BOOTSTRAP 3
Encontré una solución para este problema que parece ser lo suficientemente buena para mi sitio.
CSS:
body.modal-open > .wrap {
overflow: hidden;
height: 100%;
}
.modal-content,
.modal-dialog,
.modal-body {
height: inherit;
min-height: 100%;
}
.modal {
min-height: 100%;
}
HTML:
<body>
<div class="wrap">All non-modal content</div>
<div class="modal"></div>
</body>
Por lo tanto, en el caso de que un modal esté abierto, todo el contenido no modal se limita a la altura de la ventana gráfica y el desbordamiento está oculto, lo que impide que el sitio principal se desplace, mientras que el modal aún puede desplazarse.
EDITAR : Esta solución tiene algunos problemas en Firefox.
La solución para mi sitio era (FF solo consulta de medios):
@-moz-document url-prefix() {
.modal-body { height: auto; min-height: 100%; }
.modal { height: auto; min-height: 100%; }
.modal-dialog {
width: 100%;
height: 100%;
min-height: 100%;
padding: 0;
margin: 0;
top: 0;
left: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
border: 0px solid #000;
margin: 0;
padding: 0;
top: 0;
left: 0;
}
}
.modal-open .modal .modal-dialog {
max-height: 100%;
}
¡Esto funciona para mí!