Il plug-in modale di Bootstrap 2 non viene visualizzato dal centro

Uso il plug-in modale di avvio. Ma la finestra di dialogo modale non è mostrata al centro. Perché? errore mio?Il plug-in modale di Bootstrap 2 non viene visualizzato dal 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>

fonte

2012-04-28 cpw

Ho trovato questo workarround per risolvere questo problema:

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

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

fonte

2012-05-20 14:05:40 P48l0

Questa soluzione non funziona: http://jsfiddle.net/sonic1980/szFtE/ – Peter

Grazie, Salvato il giorno –

Ho rimosso il meno prima ($ this) per aggiungere un margine superiore positivo invece di un margine negativo, e che centrato il mio dialogo verticalmente in bootstrap 3. L'uso della soluzione sembrava spostare la finestra di dialogo all'esterno dell'area visibile. – angularsen

-14

Hai provato:

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

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

fonte

2012-04-28 12:42:32 Osman

In questo modo si utilizza jquery ui? Voglio usare il plugin modale bootstrap. scusa. – cpw

se la finestra di dialogo modale bootstrap di Twitter non è centrata orizzontalmente, è possibile risolvere questo problema tramite css.

basta dare alla finestra di dialogo modale un margine sinistro negativo che è la metà della larghezza come per es. così:

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

fonte

2012-09-12 08:02:57 nerdess

soluzione Molto pulito e molto bello! E sebbene non risponda alla domanda (centratura verticale), funziona come un fascino per l'orizzontale. –

sì grazie per questo! – the0ther

fantastico. Ottimo risparmio di tempo se non si utilizzano i valori predefiniti. Grazie, nerdess! – Hcabnettek

catturare l'evento show del .modal e quindi calcolare la nuova posizione:

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

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

fonte

2012-12-30 17:51:03 Peter

in base alla risposta del p4810 sopra, ma trattare con cui l'utente è anche sullo schermo. Funziona con posizionamento assoluto.

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

fonte

2013-02-06 22:21:04 steve

Non funziona su IE9, c'è qualcosa che IE non capisce a riguardo? – Notflip

Il plug-in modale di Bootstrap 2 non viene visualizzato dal centro

risposta

Problemi correlati