Tryb Twitter Bootstrap: Jak usunąć efekt Slide down

Czy istnieje sposób na zmianę animacji okna modalnego Twitter Bootstrap z efektu przesunięcia w dół na zanikanie lub po prostu wyświetlanie bez suwaka? Przeczytałem dokumentację tutaj:

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

Ale nie wspominają o żadnych opcjach zmiany efektów slajdów ciała modalnego.

Po prostu wyjmij fadeklasę z modalnego div.

W szczególności zmień:

<div class="modal fade hide">

do:

<div class="modal hide">

UPDATE: W przypadku bootstrap3 hideklasa nie jest potrzebna.

Modały używane przez bootstrap używają CSS3 do dostarczania efektów i można je usunąć, eliminując odpowiednie klasy z modułu div kontenera modali:

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

Jak widzisz, ten modal ma klasę .fade, co oznacza, że ​​jest ustawiony na zanikanie i .in, co oznacza, że ​​będzie się wsuwał. Po prostu usuń klasę związaną z efektem, który chcesz usunąć, który w twoim przypadku jest po prostu .inklasą.

Edycja: Właśnie uruchomiłem kilka testów i wygląda na to, że tak nie jest, .inklasa jest dodawana przez javascript, chociaż możesz zmodyfikować zachowanie slideDown za pomocą css w następujący sposób:

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

Próbny

Jeśli wolisz, aby modalne pojawiały się zamiast wsuwać się (dlaczego w ogóle się to nazywa .fade?), Możesz nadpisać klasę w swoim pliku CSS lub bezpośrednio w bootstrap.cssten sposób:

.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%;
}

Jeśli nie chcesz żadnego efektu, po prostu usuń fadeklasę z klas modalnych.

Uważam, że większość z tych odpowiedzi dotyczy bootstrapa 2. Napotkałem ten sam problem z bootstrapem 3 i chciałem podzielić się moją poprawką. Podobnie jak moja poprzednia odpowiedź na bootstrap 2, to nadal spowoduje zanikanie przezroczystości, ale NIE spowoduje przejścia slajdów.

Możesz zmienić plik modals.less lub theme.css, w zależności od przepływu pracy. Jeśli nie spędziłeś czasu z mniejszą ilością, gorąco polecam.

za mniej, znajdź następujący kod w MODALS.less

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

następnie zmień -25% na0%

Alternatywnie, jeśli używasz tylko CSS, znajdź następujące informacje w 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;
}

a następnie zmienić -25%się 0%.

Rozwiązałem to, nadpisując domyślne .modal.fadestyle w moim własnym arkuszu stylów LESS:

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

Zachowuje to animację pojawiania się / zanikania, ale usuwa animację przesunięcia w górę / w dół.

Znalazłem najlepsze rozwiązanie, które usuwa slajd, ale pozostawia zanikanie, polega na dodaniu następującego pliku css do wybranego pliku css, który jest wywoływany po pliku 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;
}

Nie podobał mi się też efekt slajdu. Aby to naprawić, wszystko, co musisz zrobić, to uczynić ten sam topatrybut zarówno dla .modal.fade, jak i modal.fade.in. Możesz także zdjąć top 0.3s ease-outw przejściach, ale pozostawienie go nie zaszkodzi. Podoba mi się to podejście, ponieważ działa zanikanie / wyciszanie, po prostu zabija slajd .

.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%;
}

Jeśli szukasz odpowiedzi na bootstrap 3, zajrzyj tutaj

możesz również nadpisać plik bootstrap.css, usuwając po prostu „top: -25%;”

po usunięciu modal będzie po prostu pojawiał się i znikał bez animacji slajdu.

Po prostu usuń klasę fade i jeśli chcesz, aby więcej animacji było wykonywanych na Modalu, po prostu użyj klas animate.css w swoim Modalu.

Pracuję z bootstrapem 3 i wtyczką modalną Durandal JS 2. To pytanie było na górze wyników Google, a ponieważ żadna z powyższych odpowiedzi nie działa, pomyślałem, że podzielę się swoim rozwiązaniem z przyszłymi odwiedzającymi.

Zastępuję domyślny kod Bootstrap Less tym w moim własnym less:

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

W ten sposób pozostaje mi tylko efekt fade, a nie slideDown.

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

Pytanie było jasne: usuń tylko slajd: Oto jak to zmienić w Bootstrap v3

W modals.less skomentuj instrukcję tłumaczenia:

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

spójrz na 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;
}

Chciałem to zaktualizować. Większość z was nie ukończyła tego wydania. Używam Bootstrap 3. żadna z powyższych poprawek nie zadziałała.

aby usunąć efekt slajdu, ale zachować zanikanie. Przeszedłem do bootstrap css i (zauważyłem następujące selektory) - to rozwiązało problem.

 .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)*/}

Poniższy CSS działa u mnie - przy użyciu Bootstrap 3. Musisz dodać ten plik CSS po stylach boostrap -

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

.modal.fade {
   transition: none; 
}

po prostu usuń klasę „fade” z klasy modalnej

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

tak jak

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