Bootstrap modal: el fondo salta a la parte superior al alternar

110

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.

javascript jquery css twitter-bootstrap twitter-bootstrap-3 FooBar
fuente
Hola Benni. Sí, definitivamente lo soy. También probé con: $ ('# myModal'). Modal ('show'); pero tiene exactamente el mismo efecto.
FooBar
1
¿Puede esto ayudarlo? El mismo problema: stackoverflow.com/questions/12894570/…
Mark
@Mark, vea mi respuesta a continuación ...
Ravimallya
Me di cuenta de que si hago clic en cualquier lugar del, windowel modal se dispara. Eso parece extraño e inesperado. Quité la buttonví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.
dward

Respuestas:

174

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.

pstenstrm
fuente
@pstenstrm, tengo una duda. le dijo que anulara el CSS para la clase .modal-open. Pero, ¿qué pasa si hay divs de cierre adicionales y, en mi respuesta, no he anulado ninguna clase en mi resolución? Funciona bien después de eliminar 2 divs adicionales. bs modal agregando .modal-backdrop div que se confundirá donde debe cerrarse debido a etiquetas de cierre adicionales.
Ravimallya
4
No me funciona, tengo el modal dentro de un iframe y se está desplazando hacia la parte superior ... ¿alguna idea?
Cabuxa.Mapache
5
Esto me lo arregló. Solo para agregar la raíz de mi problema fue 'body {height: 100%}'.
PeteG
23
No funciona para mi. Tengo un modal de vainilla con el que estoy abriendo .modal('show')y todavía se desplaza hasta la parte superior de la página. Bootstrap v3.2.0
MandM
6
Tuve que agregar algo position: inherita esta clase, pero funcioné como un encanto después de eso.
adrian3martin
28

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>
Gokhan
fuente
Lo abro exactamente como lo ha publicado allí. Echa un vistazo al enlace
FooBar
5
si no usas el "<button>" sino <a>, como en mi caso, pierdes el ícono "finger button" cuando mueves el cursor del mouse sobre el objeto. Para superar esto, lo hice: ... href = "# mai_modal_id" data-toggle = "modal" ... y no
usé
3
@pagurix - Tu comentario funcionó mejor para mi escenario.
AlfredBr
Creo que @pagurix debería escribir su comentario como una respuesta separada. Lo único que ayudó. ¡Pulgares hacia arriba!
Vibhor Dube
14

si está utilizando la etiqueta de anclaje como <a href"#" ..> ... </a>y href="#"está creando un problema, elimínelo. Puedes leer más aquí

Nimesh Jain
fuente
12 
$('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ó

Georgi Mirchev
fuente
5

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.

Dennis Heiden
fuente
4

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.

BillyJoe
fuente
Gracias, investigaré esto, aunque me cuesta creer que esto pueda desencadenar el problema que estoy experimentando. Parece que está utilizando un complemento para rastrear esto, si es así; ¿cual?
FooBar
No uso plugin excepto firebug. Siempre es bueno verificar la validez de su página en validator.w3.org . Sería un problema porque si ha abierto div, tendrá un comportamiento extraño :)
billyJoe
4

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;
}
Nils
fuente
3

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.

AyB
fuente
3

Intenté colocar .modal top en el centro de la pantalla. 

.modal {
    position: absolute;
    top: 50%;
}

Solo mis 2 centavos de pensamientos.

Holger Thiebosch
fuente
Suficientemente cerca. No votaré negativamente porque mi problema puede estar en otra parte, pero esto hizo que la mitad inferior de la pantalla se atenuara, pero el modal se colocó hacia el centro.
artesano
3

En bootstrap 3.1.1 resolví con esta solución:

body.modal-open {
    position: absolute !important;
}
Filo
fuente
2
Me salvaste el día @Filo Muchas gracias
vinothini
2

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.

ingrese la descripción de la imagen aquí

Ravimallya
fuente
4
Las respuestas con votos negativos necesitan comentarios adecuados con razones.
Ravimallya
2

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>
scooterlord
fuente
2 
body.modal-open {
overflow: visible !important;
}

Necesitaba el atributo importante para que lo arreglara

Mareos
fuente
Esto funcionó para mí, y tuve el problema de @ MandM (en los comentarios) de la respuesta de pstenstrm: "No funciona para mí. Tengo un modal de vainilla que estoy abriendo con .modal ('mostrar') y todavía se desplaza en la parte superior de la página. Bootstrap v3.2.0 ". El único efecto extraño que tiene es que ahora el fondo se desplazará si sigues desplazándote por un modal que sea más alto que la ventana, pero este es un problema menor para mí. Gracias.
dgig
1

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');
}
mpccolorado
fuente
1

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.

Playa Nathan
fuente
1

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;   
     } 
}
panda sibashankar
fuente
0

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">&times;</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>
nunoarruda
fuente
0

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>
ALFmachine
fuente
0

Este lo hizo por mi

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
warkitty
fuente
Estaba teniendo un problema similar con la barra de navegación y el contenedor saltando cuando se abrió el modal. Esto es lo que estaba buscando.
Awhitey98
¡Me alegro de que haya ayudado!
warkitty
0

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.

AlexioVay
fuente
0

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>
Pyot
fuente
0

body.modal-open { position: inherit; }

Esto funcionó de maravilla para mí.

Nimish goel
fuente
0

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.

Stnfordly
fuente
0

altura: el 100% es resolver el problema, pero debe agregar el "div" correcto

Anar Ali
fuente
0

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();
Borzilo Andrey
fuente
0

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.

general666
fuente
-1

Prueba esto, funciona perfectamente

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
minimizar
fuente
-3

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.

Ben
fuente