Modal de inicialização do Twitter: Como remover o efeito Deslizar para baixo

Existe uma maneira de alterar a animação da janela do Twitter Bootstrap Modal de um efeito slide para baixo para um fadeIn ou apenas exibir sem o Slide? Eu li a documentação aqui:

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

Mas eles não mencionam nenhuma opção para alterar os efeitos do slide corporal modal.

Basta tirar o fade classe da div modal.

Altere especificamente:

<div class="modal fade hide">

para:

<div class="modal hide">

UPDATE: Para o bootstrap3, a hideclasse não é necessária.

Os modais usados ​​pelo bootstrap usam CSS3 para fornecer os efeitos e podem ser removidos, eliminando as classes apropriadas dos modals container div:

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

Como você pode ver, este modal tem uma classe de .fade, o que significa que ele está definido para desaparecer e .in, o que significa que ele deslizará. Portanto, basta remover a classe relacionada ao efeito que você deseja remover, que no seu caso é apenas a .inclasse.

Edit: Acabei de executar alguns testes e parece que esse não é o caso, a .inclasse é adicionada por javascript, embora você possa modificar o comportamento do slideDown com css da seguinte maneira:

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

Demo

Se você deseja que o modal desbote em vez de deslizar (por que é chamado .fadeassim mesmo?), Você pode sobrescrever a classe no seu arquivo CSS ou diretamente bootstrap.csscom isso:

.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 você não deseja nenhum efeito, basta remover a fadeclasse das classes modais.

Acredito que a maioria dessas respostas seja para o bootstrap 2. Encontrei o mesmo problema no bootstrap 3 e queria compartilhar minha correção. Como minha resposta anterior para o bootstrap 2, isso ainda diminui a opacidade, mas NÃO faz a transição do slide.

Você pode alterar os arquivos modals.less ou theme.css, dependendo do seu fluxo de trabalho. Se você não passou um tempo de qualidade com menos, eu recomendo.

por menos, encontre o seguinte código em MODALS.less

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

então mude o -25% para0%

Como alternativa, se você estiver usando apenas o css, encontre o seguinte em 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 depois mude -25%para 0%.

Resolvi isso substituindo os .modal.fadeestilos padrão na minha própria folha de estilo MENOS:

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

Isso mantém a animação fade in / fade out, mas remove a animação deslizar para cima / deslizar para baixo.

Eu encontrei a melhor solução que remove o slide, mas deixa o fade , adicionando o seguinte css em um arquivo css da sua escolha que é chamado após o 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;
}

Também não gostei do efeito slide. Para corrigir isso, tudo o que você precisa fazer é tornar o topatributo o mesmo para .modal.fade e modal.fade.in. Você também pode tirar top 0.3s ease-outas transições, mas não é demais deixá-las. Gosto dessa abordagem porque o fade in / out funciona, apenas mata o slide .

.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 você está procurando uma resposta de bootstrap 3, veja aqui

você também pode sobrescrever o bootstrap.css simplesmente removendo "top: -25%;"

uma vez removido, o modal simplesmente desaparecerá sem a animação do slide.

Apenas remova a classe fade e se você quiser que mais animações sejam executadas no Modal, use as classes animate.css no seu Modal.

Estou trabalhando com o bootstrap 3 e o plugin modal Durandal JS 2. Esta pergunta estava no topo dos resultados do Google e, como nenhuma das respostas acima está funcionando, pensei em compartilhar minha solução para futuros visitantes.

Eu substituo o código Less do Bootstrap padrão por este no meu próprio less:

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

Dessa forma, fico apenas com o efeito fade e sem slideDown.

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

A pergunta era clara: remova apenas o slide: Veja como alterá-lo no Bootstrap v3

No modals.less, comente a declaração de conversão:

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

veja 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;
}

Queria atualizar isso. A maioria de vocês não concluiu este problema. Estou usando o Bootstrap 3. Nenhuma das correções acima funcionou.

para remover o efeito do slide, mas mantenha o desbotamento. Entrei no bootstrap css e (observei os seguintes seletores) - isso resolveu o 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)*/}

O seguinte CSS funciona para mim - Usando o Bootstrap 3. Você precisa adicionar este css após os estilos boostrap -

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

.modal.fade {
   transition: none; 
}

basta remover a classe 'fade' da classe modal

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

Como

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