javascript - close - modal bootstrap ejemplos
Bootstrap modal: el fondo salta al principio al alternar (21)
Tengo un problema, con un modal. Tengo un botón en una página, que alterna el modal. Cuando aparece el modal, la página salta a la parte superior.
He hecho todo lo posible para encontrar una solución / etc, pero estoy realmente perdido.
EDITAR:
También he intentado con: $(''#myModal'').modal(''show''); pero tiene exactamente el mismo efecto.
Cuando se abre el modal-open clase modal-open se establece en la etiqueta <body> . Esta clase establece el 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 rollo debe permanecer en su lugar.
Después de leer docenas de respuestas durante varias horas, copié el código original del archivo bootstrap de nuevo y lo depuré paso a paso para ver qué causaba que siempre saltara a la cima. Porque la última versión real de Bootstrap 3 muestra el modal en la posición en la que se encuentra en este momento. Descubrí que -webkit-transform: translate3d(0,0,0); y height: 100% en mi etiqueta corporal css causó este comportamiento. Tal vez esto ayude a alguien.
En bootstrap 3.1.1 lo resolví con esta solución:
body.modal-open {
position: absolute !important;
}
Este lo hizo por mí
body.modal-open {
overflow: inherit;
padding-right: 0 !important;
}
Finalmente me di cuenta de esto. NO ajuste el botón dirigido 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>
Intenté establecer .modal arriba en el centro de la pantalla.
.modal {
position: absolute;
top: 50%;
}
Solo mis 2cents de pensamientos.
Intenté replicar este problema en mi servidor local y, por extraño que parezca, existe un conflicto con el archivo Bootstrap JS que está utilizando.
Intente comentar su 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 usa Bootstrap 2.3.2:
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Esto lo hizo funcionar para mí.
Lo intenté con la versión 3 de Bootstrap, pero eso no funcionó. Todavía no puedo identificar la parte del problema, pero en algún punto Firebug me arrojó un e.preventDefault() is not a function error de e.preventDefault() is not a function . Supongo que esta debería ser la causa raíz, pero aún no lo he comparado con los otros archivos JS.
Intenta usar esto para abrir modal y ver qué pasa:
<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
Launch demo modal
</a>
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.
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 verificar que el resto de la función funcione 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>
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.
Prueba esto, funciona a la perfección
/* fix body.modal-open overflow:hidden */
body.modal-open {
height: auto;
}
Si la respuesta de pstenstrm no funciona para usted, intente combinarla con este botón de reemplazo HTML:
<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.
Si llamas modal con etiqueta. Intente eliminar ''#'' del atributo href. Y llame a modal con atributos de datos.
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
Tuve el mismo problema al usar Bootstrap 2.3.2
Fue un problema al hacer clic en un enlace:
El truco fue: devolver falso;
<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
<i class="icon-map-marker"></i>
</a>
y el js:
function openModal() {
$(''#myModal'').modal(''show'');
}
Tuve el mismo problema y creo que lo resuelvo. ¡Solo necesita colocar el HTML modal como un elemento directo de la etiqueta corporal ! Sin embargo, puede colocar el código HTML para el botón que desencadena 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>
si está utilizando una etiqueta de anclaje como <a href"#" ..> ... </a> y href="#" está creando un problema, elimínelo. Puedes leer más here
tiene 2 etiquetas div cierre adicionales justo antes de <div id="footer"> o después de <div id="mainFrame" class="group"> div. Estoy usando visual studio 2012 express para inspeccionar esto.
Por favor, elimine estos 2 divs adicionales y díganos cómo funciona. Eliminé divs adicionales y eliminé todos los scripts personalizados. retenido solo jquery core y bootstrap en el pie de página. aquí está el sreenshot de la salida final. here está el patio de Jsbin para ti, que funciona bien.
Le sugiero que use headjs para cargar todos los scripts y archivos css. tampoco es una buena práctica cargar los guiones dos veces.
body.modal-open { position: inherit; }
Esto funcionó como un encanto para mí.
$(''the thing you click on'').click(function ($e) {
$e.preventDefault();
});
Esto te ayudará a detener la barra de desplazamiento en la parte superior. Funcionó para mí
body.modal-open {
overflow: visible !important;
}
Necesitaba el atributo importante para solucionarlo