[javascript] Twitter Bootstrap modal: come rimuovere l'effetto slide down


Answers

Le modali utilizzate dal bootstrap usano CSS3 per fornire gli effetti e possono essere rimosse eliminando le classi appropriate dal div contenitore delle 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 su fade in e .in , il che significa che entrerà in azione. Quindi basta rimuovere la classe relativa all'effetto che desideri rimuovere, che nel tuo caso è solo la classe .in

Modifica: appena eseguito alcuni test e sembra che non sia il caso, la classe .in viene aggiunta da javascript, anche se puoi modificare il suo comportamento slideDown con css in questo modo:

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

Demo

Question

C'è un modo per cambiare l'animazione della finestra di Twitter Bootstrap Modal 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 nessuna opzione per modificare gli effetti della diapositiva del corpo modale.




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 fade e se vuoi che vengano eseguite più animazioni sul modale usa solo le classi animate.css nel tuo modal.




Credo che la maggior parte di queste risposte siano per il bootstrap 2. Ho incontrato lo stesso problema per bootstrap 3 e volevo condividere la mia correzione. Come la mia precedente risposta per bootstrap 2, questo farà ancora una dissolvenza dell'opacità, ma NON farà la transizione della diapositiva.

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

per meno, trovare 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 cambia il -25% a 0%

In alternativa, se stai usando solo il css, cerca 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% .




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

In modals.less commenta l'istruzione translate:

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



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



Non mi è piaciuto neanche l'effetto slide. Per risolvere tutto ciò che devi fare è rendere l'attributo in top uguale per .modal.fade e modal.fade.in. Puoi anche decollare il top 0.3s ease-out durante le transizioni, ma non fa male lasciarlo. Mi piace questo approccio perché la dissolvenza in entrata e in uscita 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






Related