Tryb Twitter Bootstrap: Jak usunąć efekt Slide down


Odpowiedzi:


359

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.


9
Chociaż PO pytał o to, jak sprawić, by zniknął, więc niektóre z tych odpowiedzi są poprawne w przypadku alternatywnego sformułowania pytania. Chyba to po prostu złe pytanie, ponieważ to tak naprawdę 2 pytania w jednym i nikt nie odpowiedział na oba pytania w jednej odpowiedzi.
umassthrower

1
Nie musisz modyfikować źródeł bootstrap. Musisz tylko zmodyfikować swój HTML. To jest poprawna odpowiedź.
mpccolorado

31
@umassthrower jest poprawne. Odpowiada się tylko, jak nie mieć przejścia. Pytanie, jak znikać, ale nie opuszczać z góry, nie jest objęte tą odpowiedzią.
Synesso

26
Nie rozumiem, jak to jest poprawna odpowiedź ... to sprawia, że ​​modal pojawia się bez zaniku, a OP poprosił o usunięcie SLAJDU, ale nie FADE ...
Shawn Taylor

2
Czekam, aby utrzymać zanikanie i usunąć slajd, a ta odpowiedź nie jest pomocna. To dziwne, że bootstrap użył swojej klasy fade do obsługi efektu slajdu dla modalu, ponieważ zanikanie jest całkowicie oddzielne w ich CSS.
Leeish

36

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


2
Powinieneś również dodać to do tła: modal.fade, .modal-backdrop.fadeetc ...
David Hellsing,

prawdopodobnie lepiej jest edytować plik component-animations.less, z powodów, o których wspomina David.
Peter Hanley,

klasa fade jest opcjonalna, jest lepsza (i preferowana zgodnie z dokumentacją BS) odpowiedź Rose poniżej
umassthrower

@umassthrower ta odpowiedź jest dość stara, w momencie pisania tego wyboru nie było.
Andres Ilich

Nie jestem pewien, czy komentarz jest poprawny, ponieważ BS 2.0 zostało wydane 3 miesiące przed tą odpowiedzią i usunąłem fade z moich modali podczas używania v2.0 zeszłego lata. Być może dopiero potem zmienili dokumentację. Nie wiem.
umassthrower

30

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.


1
Top: 50% wydaje się być przyczyną kłopotów, gdy zamyka się okno dialogowe. Dialog wydaje się otwierać w tym samym miejscu co poprzednio; ale tuż przed zamknięciem, na ułamek sekundy przesuwa się do środka, a następnie zamyka. Co najmniej w Chrome. Czy ktoś inny też to zauważył?
Mohitp

1
@lorem monkey - na zdrowie, chciał zaniknąć, ale nie slajd. Jeśli ktoś chce wersję scss / compass ... .modal.fade {@include przejście (krycie .2s linear, none);}
Simon

1
@mohitp Zamiast „top: 50%” używam „top: 25%”. Dodałem również .modal.fade.in {top: 25%; } Wydaje się, że załatwił mi sprawę. Nie jestem pewien, dlaczego to działa, ponieważ nie mam klasy „in” w moim trybie.
Darren

2
@dkrape inklasa została dodana przez Bootstrap.js
Dave Sag

To jest właściwa odpowiedź, odpowiadająca na obie części pytania.
mat.

26

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


2
Zastąpiłbym te style w niestandardowym arkuszu stylów zamiast edytować arkusz stylów Bootstrap / Less.
Bassem

jest to JEDYNE proste rozwiązanie CSS pozwalające uzyskać FADE bez slajdu. dzięki.
davideghz

18

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ół.


Dziękuję Ci. Skończyło się na tym, że użyłem 10% zamiast 50% i zmniejszyłem przejście z 0,3 do 0,25 s, co wydaje mi się nieco płynniejsze.
isapir

Wielokrotne otwieranie i zamykanie modalu przesuwa go w górę strony w czasie.
Leeish

12

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

1
To najlepsza odpowiedź dla Bootstrap 3, aby zachować
efekt

2
To rozwiązanie działa również dobrze w przypadku Bootstrap 4. Dzięki!
aprovent

11

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


1
Dwa górne przykłady powyżej LESS pomijają deklarację ".modal.fade.in", co powoduje, że modal przeskakuje nieco po zamknięciu. Ten działa świetnie. Oto w praktyce: jsfiddle.net/dkrape/4EwFq
Darren

To działa głównie, ale widzę jasnoniebieską poziomą linię (we wszystkich przeglądarkach Safari, Firefox i Chrome) około 32px powyżej mojego modalu, gdy się pojawia.
Dave Sag

2

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.


2

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.


1

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.


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

Spowoduje to usunięcie animacji z wyświetlania i ukrywania. Dla mnie działa dobrze również z interfejsem Angular-Bootstrap.
SM Adnan

1

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%);


0

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

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

0

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

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

tak jak

class="modal bs-example-modal-lg"
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.