javascript - que - modal bootstrap ejemplos

Twitter Bootstrap Modal desplaza la página hacia arriba en la pantalla

Question

Al hacer clic en un enlace que activa un menú emergente de Twitter Bootstrap, el navegador se desplaza hacia arriba en la página. Este comportamiento solo ocurre en Chrome.

Aquí hay una página de demostración:

http://www.turizmburosu.com/test2.aspx

La página tiene 600 filas de enlaces, lo que hace que el cuerpo de la página exceda la altura de la ventana. Si se hace clic en alguno de estos enlaces, se muestra el cuadro de diálogo modal. Cuando esté en Chrome, al hacer clic en cualquiera de los enlaces debajo de la vista inicial, la página de fondo se desplazará hacia arriba (no siempre del todo hacia la parte superior).

Utilizo la siguiente función para activar la visualización del Modal:

function test(id, imp) {
$("#modalLabel").html("Header");
$("#modalBody").html("Body");
$("#myModal").modal("show");
}

y los enlaces son de la forma:

<a href="" onclick="test();return false;">Test Link ###</a>

Estoy viendo este comportamiento en Chrome 22.0.1229.94 m .

¿Alguna sugerencia / idea de por qué está sucediendo esto y cómo prevenirlo?

Ejemplo adicional

Esto se puede recrear en la página de documentación de Twitter Bootstrap para el complemento Modal .

Una vez en la página, simplemente anule la API de datos existente para usar la API de JavaScript en su lugar:

$(''#modals a[data-toggle="modal"]'').on(''click'',
function(e) {
$(''#myModal'').modal(''toggle'');
return false
});

Ahora, si se hace clic en el botón Launch Demo Modal , la página se desplazará hacia arriba cuando se muestre el modal.

De nuevo, esto es usando Chrome.

Answer 1

Reparado (29/10/2012)

Este problema se ha solucionado desde Bootstrap v2.2.0. Ver commit e24b46 ... para más detalles.

(respuesta original)

Esto se debe a un error en la implementación de Twitter Bootstrap Modal (a partir de 2.1.1). La raíz del problema es que el foco se establece en el modal antes de completar su transición. Esto solo ocurrirá bajo la condición de que

1. el navegador admite transiciones CSS (y está utilizando bootstrap-transition.js );
2. el modal tiene la clase fade ; y
3. cuando el foco se establece en un elemento fuera de la vista actual, el navegador se desplazará para moverlo a la vista (por ejemplo, Chrome, Safari).

Cabe señalar que esto afecta tanto a la API de datos (basada en marcado) como a la API programática (basada en JS). Sin embargo, la razón por la que es más notable cuando se utiliza el enfoque programático es porque, a diferencia de la API de datos, no restaura automáticamente el foco al elemento desencadenante y, por lo tanto, no desplaza la vista hacia abajo cuando el modal está oculto.

Más información está disponible en el repositorio de Twitter Bootstrap en el Issue # 5336: Modal Scrolls Background Content .

Se ha fusionado una solución en la rama 2.1.2-wip , que debería estar disponible en cualquier momento.

Aquí hay una demostración usando el parche bootstrap-modal.js :

JSFiddle

Answer 2

Tuve un problema similar en mi sitio, que fue causado por otro plugin jquery (sidr). Cuando la barra lateral estaba presente y abrí una ventana modal, me enviaban de nuevo a la parte superior.

En jquery.sidr.js cambié la línea 102-106 de:

// Prepare page if container is body
if($body.is(''body'')){
scrollTop = $html.scrollTop();
$html.css(''overflow-x'', ''hidden'').scrollTop(scrollTop);
}

A:

// Prepare page if container is body
if($body.is(''body'') && !$(''#modal'').hasClass(''in'')){
scrollTop = $html.scrollTop();
$html.css(''overflow-x'', ''hidden'').scrollTop(scrollTop);
}

Si está utilizando este complemento junto con el modal de twitter bootstrap, tal vez esto pueda ayudarlo.

Answer 3

El mismo problema. Es causado por "#" en y el ancla está haciendo para desplazarse. Lo arreglé borrando la etiqueta de anclaje y coloco esto:

<span onclick="$(''#umisteni_modal'').modal(''show'');" style="cursor:pointer;">Změnit místo dodání</span>

Answer 4

Tuve el mismo problema debido a estas líneas de CSS que se pensaba que mostraban permanentemente barras de desplazamiento en el navegador. La eliminación de las dos líneas resolvió el problema:

html,
body {
min-height: 100%;
height: 101%;
}

Answer 5

para volver a enfocar

var triggerOffset=0;
$(''.modal'').on(''show.bs.modal'', function() {
triggerOffset=$(window).scrollTop();
});
$(''.modal'').on(''hidden.bs.modal'', function() {
var animationTime=1;
$(''html, body'').animate({
scrollTop: (triggerOffset)
}, animationTime);
});

Answer 6

He estado teniendo este problema por mucho tiempo, pero mi solución fue eliminar href de la etiqueta de anclaje

es decir

<a onclick="test();return false;">Test Link ###</a>

No tengo salto ahora

Espero que esto ayude a alguien en el futuro