El complemento modal de Bootstrap 2 no se muestra en el centro

Uso el complemento modal bootstrap. Pero el diálogo modal no se muestra en el centro. ¿Por qué? ¿mi error?El complemento modal de Bootstrap 2 no se muestra en el centro

http://dl.dropbox.com/u/573972/stackoverflow/bootstrap/modal.html

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8"> 
    <title>test</title> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <!-- Mobile Specific--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- CSS--> 
    <link rel="stylesheet" href="bootstrap.min.css"> 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js'></script> 
</head> 
<body> 
    <div id="login" class="modal"> 
    <div class="modal-header"> 
     <h3>Login to Room fuga</h3> 
    </div> 
    <div class="modal-body"> 
     hogehoge 
    </div> 
    </div> 
    <script src="bootstrap.min.js"> 
    </script> 
    <script> 
$('#login').modal(); 
</script> 
</body> 
</html>

Fuente

2012-04-28 cpw

encontré este workarround para solucionar este problema:

$('#YourModal').modal().css(
      { 
       'margin-top': function() { 
        return -($(this).height()/2); 
       } 
      })

Fuente: https://github.com/twitter/bootstrap/issues/374

Fuente

2012-05-20 14:05:40 P48l0

Esta solución no funciona: http://jsfiddle.net/sonic1980/szFtE/ – Peter

Gracias, guardado el día –

Quité el menos anterior ($ this) para agregar un margen superior positivo en lugar de un margen negativo, y eso centré mi diálogo verticalmente en bootstrap 3. Usar la solución directamente pareció mover mi diálogo fuera del área visible. – angularsen

-14

¿Usted intentó:

$("#login").dialog({ 
    modal: true 
});

Ref: http://jqueryui.com//demos/dialog/modal.html

Fuente

2012-04-28 12:42:32 Osman

¿De esta manera se usa jquery ui? Quiero usar el complemento modal bootstrap. lo siento. – cpw

si su cuadro de diálogo modal de arranque de twitter no está centrado horizontalmente, puede corregirlo a través de css.

simplemente proporcione al cuadro de diálogo modal un margen izquierdo negativo que es la mitad de su ancho, como p. Ej. por lo que:

.modalDialogBlabla { 
    margin: 0 0 0 -250px; 
    width: 500px; 
    }

Fuente

2012-09-12 08:02:57 nerdess

solución muy limpia y muy agradable! Y aunque no responde a la pregunta (centrado vertical), SÍ funciona como un encanto para horizontal. –

¡sí, gracias por esto! – the0ther

impresionante. Gran ahorro de tiempo si no está utilizando los valores predeterminados. Gracias nerdess! – Hcabnettek

capturar el evento show del .modal y luego calcular la nueva posición:

$('body').on('show', '.modal', function(){ 
    $(this).css({'margin-top':($(window).height()-$(this).height())/2,'top':'0'}); 
});

DEMO: http://jsfiddle.net/sonic1980/b2EHU/

Fuente

2012-12-30 17:51:03 Peter

Sobre la base de la respuesta de p4810 anterior, pero frente a los que el usuario está en la pantalla también Funciona con posicionamiento absoluto.

$('#YourModal').modal().css(
      { 
       'margin-top': function() { 
        return window.pageYOffset-($(this).height()/2); 
       } 
      });

Fuente

2013-02-06 22:21:04 steve

No funciona en IE9, ¿hay algo que IE no entienda acerca de esto? – Notflip

El complemento modal de Bootstrap 2 no se muestra en el centro

Respuesta

Cuestiones relacionadas