Tengo un problema con un modal. Tengo un botón en una página que cambia el modal. Cuando aparece el modal, la página salta a la parte superior.
Hice todo lo que pude para encontrar una solución / etc, pero estoy realmente perdido.
EDITAR:
También he probado con: $('#myModal').modal('show');pero tiene exactamente el mismo efecto.
Cuando se abre el modal modal-open, se establece una clase en la <body>etiqueta. Esta clase se ajusta overflow: hidden;al cuerpo. Agregue esta regla a su hoja de estilo para anular el estilo bootstrap.css:
body.modal-open {
overflow: visible;
}
Ahora el pergamino debería permanecer en su lugar.
.modal('show')y todavía se desplaza hasta la parte superior de la página. Bootstrap v3.2.0
position: inherita esta clase, pero funcioné como un encanto después de eso.
Si está llamando modal con etiqueta. Intente eliminar '#' del atributo href y llame al modal con atributos de datos.
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
$('the thing you click on').click(function ($e) {
$e.preventDefault();
});Esto te ayudará a detener la barra de desplazamiento en la parte superior. Me funcionó
Posiblemente trabajando con modales anidados en algún lugar del código:
body.modal-open {
overflow: visible;
position: absolute;
width: 100%;
height:100%;
}Para mí fue una combinación de posición, altura y desbordamiento.
No veo un error específico, pero le aconsejo que verifique su sintaxis html .
Una pequeña prueba con tu fuente me da errores como
Línea 127, columna 34: elemento no cerrado div.
<div class="inner onlySides">
Esto podría ser un problema.
La forma más sencilla de resolver el fondo de salto es definir dos parámetros:
body.modal-open {
overflow: visible;
padding-right: 0 !important;
}Intenté replicar este problema en mi localhost y, por extraño que parezca, hay un conflicto con el archivo Bootstrap JS que estás usando.
Intenta comentar tu código de:
<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script> Y en su lugar use Bootstrap 2.3.2:
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>Esto hizo que funcionara para mí.
Lo intenté con Bootstrap versión 3 pero no funcionó. Todavía no puedo identificar la parte del problema, pero en algún lugar Firebug me arrojó un e.preventDefault() is not a functionerror; supongo que esta debería ser la causa raíz, pero aún tengo que compararlo con los otros archivos JS.
Intenté colocar .modal top en el centro de la pantalla.
.modal {
position: absolute;
top: 50%;
}Solo mis 2 centavos de pensamientos.
En bootstrap 3.1.1 resolví con esta solución:
body.modal-open {
position: absolute !important;
}tiene 2 divetiquetas de cierre adicionales justo antes <div id="footer">o después del <div id="mainFrame" class="group">div. Estoy usando Visual Studio 2012 Express para inspeccionar esto.
Elimine estos 2 divs adicionales y háganos saber cómo funciona. Eliminé divs adicionales y eliminé todos los scripts personalizados. solo retuvo jquery core y bootstrap en el pie de página. aquí está la captura de pantalla del resultado final. aquí está el patio de recreo de jsbin para usted que está funcionando bien.
Le sugiero que use headjs para cargar todos los scripts y archivos css. Además, no es una buena práctica cargar los scripts dos veces.
Intente usar esto para abrir modal y vea qué sucede:
<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
Launch demo modal
</a>body.modal-open {
overflow: visible !important;
}Necesitaba el atributo importante para que lo arreglara
Tuve el mismo problema al usar Bootstrap 2.3.2
Fue un problema para hacer clic en un enlace:
El truco era: devolver falso;
<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
<i class="icon-map-marker"></i>
</a>y los js:
function openModal() {
$('#myModal').modal('show');
}Pasé horas en esto probando todo aquí y en otros lugares. Para el uso de material angularjs, resultó que tuve que deshabilitar la animación en el objeto de configuración uibModal.open arg.
Por ejemplo:
$uibModal.open(
{
animation: false,
component: 'myDialogComponent',
size: 'lg',
resolve: {
details: function() {
return detailsCollection;
}
}
}
);Espero que esto ayude a alguien más.
Si enfrenta este problema en un programa Angular, agregue el siguiente código en la primera línea del archivo .scss.
::ng-deep {
body.modal-open {
overflow: visible !important;
position: absolute !important;
}
}Tuve el mismo problema y creo que lo he resuelto. ¡Solo necesita colocar el HTML modal como hijo directo de la etiqueta del cuerpo ! Sin embargo, puede colocar el código HTML para el botón que activa el modal donde lo necesite. Creo que esto evita la herencia de CSS y los problemas de posición que desencadenan este problema.
Ejemplo:
<body>
<!-- All your other HTML code -->
<div>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>Finalmente descubrí este. NO envuelva el botón que apunta al modal en una etiqueta de anclaje.
Malo
<a href"#">
<button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>Bueno
<button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>Este lo hizo por mi
body.modal-open {
overflow: inherit;
padding-right: 0 !important;
}Después de leer docenas de respuestas durante varias horas, copié el código original del archivo de arranque nuevamente y depuré paso a paso para ver qué causaba que siempre saltara a la parte superior. Porque la última versión real de Bootstrap 3 muestra el modal en la posición en la que se encuentra ahora. Me enteré de eso -webkit-transform: translate3d(0,0,0);y height: 100%en mi etiqueta de cuerpo css causó este comportamiento. Quizás esto ayude a alguien.
Para mí funciona cuando cambié la versión de 3.1.1 a 3.3.7
Si no tiene que usar la versión 3.3.1, intente reemplazarla.
Después del cambio, es bueno comprobar que el resto de la función funciona correctamente.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>body.modal-open {
position: inherit;
}
Esto funcionó de maravilla para mí.
Probé todos los ejemplos anteriores, esto es lo único que funcionó para mí:
.modal-open {
padding-right: 0 !important;
}Quitar el acolchado del lado derecho del modelo: evita el salto.
altura: el 100% es resolver el problema, pero debe agregar el "div" correcto
Tengo el mismo problema y ninguna de las respuestas me ayudó. Encontré una solución que parece estúpida pero funciona al menos en mi caso.
Descubrí que la página se desplaza hacia la parte superior solo una vez y, después de eso, los siguientes modales abiertos funcionan como se esperaba. Entonces descubrí que ocultar cualquier elemento en el DOM inicia el mismo desplazamiento extraño. Así que simplemente creé un div ficticio después de la carga de la página que ocultarlo y eliminarlo y esto resolvió el problema.
var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();Estaba enfrentando el mismo problema. El problema era que estaba agregando la clase .modal-open a html y elementos del cuerpo. Simplemente agregue esta clase al cuerpo y todo funcionará como se esperaba.
Prueba esto, funciona perfectamente
/* fix body.modal-open overflow:hidden */
body.modal-open {
height: auto;
}¡Es una buena idea arreglarlo, parece un deportista!
lo suficiente, agregó uno de los dos códigos CSS en su estilo
.body.modal-open { overflow:visible;padding-right:0px !important;}
.body.modal-open { height:auto;padding-right:0px !important;}
https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-153405449
Si la respuesta de pstenstrm no funciona para usted, intente combinarla con este HTML de botón de reemplazo:
<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>Esto debería mantener el botón en pantalla.
windowel modal se dispara. Eso parece extraño e inesperado. Quité labuttonvía devtools, y en cualquier lugar haciendo clic en la página todavía abierto la ventana modal. ¿Fue ese el comportamiento deseado? Me pregunto si no tiene el selector correcto para el evento de clic modal.