Twitter Bootstrap modale: come rimuovere l'effetto Slide down

C'è un modo per cambiare l'animazione della finestra Modal Bootstrap di Twitter da un effetto slide down a un fadeIn o semplicemente visualizzare senza Slide? Ho letto la documentazione qui:

http://getbootstrap.com/javascript/#modals

Ma non menzionano alcuna opzione per cambiare gli effetti modali dello slide del corpo.

Basta prendere la fadeclasse dal div modale.

In particolare, modifica:

<div class="modal fade hide">

per:

<div class="modal hide">

AGGIORNAMENTO: per bootstrap3, la hideclasse non è necessaria.

Le modali utilizzate dal bootstrap usano CSS3 per fornire gli effetti e possono essere rimosse eliminando le classi appropriate dal div contenitore modali:

<div class="modal hide fade in" id="myModal">
   ....
</div>

Come puoi vedere, questo modale ha una classe di .fade, il che significa che è impostato per dissolversi e .in, nel senso che scivolerà dentro. Quindi basta rimuovere la classe relativa all'effetto che si desidera rimuovere, che nel tuo caso è solo la .inclasse.

Modifica: Ho appena eseguito alcuni test e sembra che non sia così, il .in classe viene aggiunta da JavaScript, anche se puoi modificare il comportamento di slideDown con CSS in questo modo:

.modal.fade {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

dimostrazione

Se ti piace avere la dissolvenza modale anziché scivolare dentro (perché si chiama .fadecomunque?) Puoi sovrascrivere la classe nel tuo file CSS o direttamente bootstrap.csscon questo:

.modal.fade{
    -webkit-transition: opacity .2s linear, none;
    -moz-transition: opacity .2s linear, none;
    -ms-transition: opacity .2s linear, none;
    -o-transition: opacity .2s linear, none;
    transition: opacity .2s linear, none;
    top: 50%;
}

Se non desideri alcun effetto, rimuovi la fadeclasse dalle classi modali.

Credo che la maggior parte di queste risposte riguardi bootstrap 2. Ho riscontrato lo stesso problema per bootstrap 3 e volevo condividere la mia correzione. Come la mia precedente risposta per bootstrap 2, questo farà comunque sbiadire l'opacità, ma NON farà la transizione delle diapositive.

È possibile modificare i file modals.less o theme.css, a seconda del flusso di lavoro. Se non hai trascorso del tempo di qualità con meno, lo consiglio vivamente.

per meno, trova il seguente codice in MODALS.less

&.fade .modal-dialog {
  .translate(0, -25%);
  .transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate(0, 0)}

quindi modificare la -25%a0%

In alternativa, se stai usando solo il CSS, trova quanto segue in theme.css:

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}

e quindi modificare il -25%a 0%.

Ho risolto questo problema sovrascrivendo gli .modal.fadestili predefiniti nel mio foglio di stile MENO:

.modal {
  &.fade {
    .transition(e('opacity .3s linear'));
    top: 50%;
  }
  &.fade.in { top: 50%; }
}

Ciò mantiene l'animazione di dissolvenza in entrata / in uscita ma rimuove l'animazione di scorrimento verso l'alto / verso il basso.

Ho trovato la soluzione migliore che rimuove la diapositiva ma lascia la dissolvenza è aggiungendo i seguenti css in un file css del tuo chosing che viene invocato dopo bootstrap.css

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;

    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

Neanche a me piaceva l'effetto slide. Per risolvere questo, tutto ciò che devi fare è rendere l' topattributo uguale per entrambi .modal.fade e modal.fade.in. Puoi togliere anche top 0.3s ease-outle transizioni, ma non fa male lasciarlo entrare. Mi piace questo approccio perché la dissolvenza in / out funziona, uccide solo la diapositiva .

.modal.fade {
  top: 20%;
  -webkit-transition: opacity 0.3s linear;
     -moz-transition: opacity 0.3s linear;
       -o-transition: opacity 0.3s linear;
          transition: opacity 0.3s linear;
}

.modal.fade.in {
  top: 20%;
}

Se stai cercando una risposta bootstrap 3, guarda qui

puoi anche sovrascrivere bootstrap.css semplicemente rimuovendo "top: -25%;"

una volta rimosso, il modale si dissolverà semplicemente dentro e fuori senza l'animazione della diapositiva.

Basta rimuovere la classe di dissolvenza e se si desidera eseguire più animazioni sul Modale, utilizzare semplicemente le classi animate.css nel proprio Modale.

Sto lavorando con bootstrap 3 e il plugin modale Durandal JS 2. Questa domanda era in cima ai risultati di Google e poiché nessuna delle risposte precedenti funziona per me, ho pensato di condividere la mia soluzione per i futuri visitatori.

Sostituisco il codice Less di Bootstrap predefinito con questo nel mio less:

.modal {
  &.fade .modal-dialog {
    .translate(0, 0);
    .transition-transform(~"none");
  }
  &.in .modal-dialog { .translate(0, 0)}
}

In questo modo mi rimane solo l'effetto di dissolvenza e nessuna slideDown.

.modal.fade, .modal.fade .modal-dialog {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

La domanda era chiara: rimuovere solo la diapositiva: ecco come cambiarla in Bootstrap v3

In modals.less commenta l'istruzione translate:

&.fade .modal-dialog {
  //   .translate(0, -25%);

guarda http://quickrails.com/twitter-bootstrap-modal-how-to-remove-slide-down-effect-but-leaves-the-fade/

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

Volevo aggiornare questo. Molti di voi non hanno completato questo problema. Sto usando Bootstrap 3. nessuna delle correzioni sopra ha funzionato.

per rimuovere l'effetto slide ma mantenere la dissolvenza. Sono entrato in bootstrap css e (ho notato i seguenti selettori) - questo ha risolto il problema.

 .modal.fade .modal-dialog{/*-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out*/}

 .modal.in .modal-dialog{/*-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)*/}

Il seguente CSS funziona per me - Uso di Bootstrap 3. Devi aggiungere questo CSS dopo gli stili boostrap -

.modal.fade .modal-dialog{
    -webkit-transition-property: transform; 
    -webkit-transition-duration:0 ; 
    transition-property: transform; 
    transition-duration:0 ; 
}

.modal.fade {
   transition: none; 
}

basta rimuovere la classe 'fade' dalla classe modale

class="modal fade bs-example-modal-lg"

come

class="modal bs-example-modal-lg"