Fade in i out Bootstrap 3 modalny

Dałem mojej Bootstrap 3 modal "fade" klasy, ale modal nie "znikną" i nie tak jak się spodziewam. Wydaje wsunąć od góry, zamiast zanikać wFade in i out Bootstrap 3 modalny

modalne. Przycisk

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div>

wyzwalania:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button>

Aby pokazać przykład, jak będę oczekiwać 'fade' Efekt, który stworzyłem, stworzyłem ten przykład: http://jsfiddle.net/spQp5/

Jak mogę zmusić mój modal do "znikania" w ten sposób?

Źródło

2014-05-21 henrywright

Spróbuj zmienić klasę div class = „' modalnej pojawiania się”' – APAD1

wydawało się, że działa, ale nie można powiedzieć, bo blaknięcie się zbyt szybko. A jeśli zamknę modal, a następnie ponownie otworzę slajd z góry efekt powróci – henrywright

Modele Bootstrap domyślnie pojawiały się. Być może zaniknie zbyt szybko, abyś mógł to zobaczyć? Jeśli spojrzeć na css widać mają Transitions konfigurację, aby to zanikać w na .15 sekund:

.fade { 
    opacity: 0; 
    -webkit-transition: opacity .15s linear; 
    transition: opacity .15s linear; 
}

Zmiana pojawiania się w jednej sekundzie, w celach demonstracyjnych, można pokazać, że jest w rzeczywistości zanikanie.

.fade { 
    opacity: 0; 
    -webkit-transition: opacity 1s linear; 
    transition: opacity 1s linear; 
}

Źródło

2014-05-21 19:45:21 david

To na pewno się dzieje. Teraz widzę efekt zanikania, ale a) modal nadal "ślizga się" od góry i b) zanikanie się nie zdarza. Zobacz tutaj http://jsfiddle.net/KqXBM/1/ – henrywright

Przesuwanie z górnej części pochodzi z klasy "modal-dialog". W szczególności z selektorem ".modal.fade .modal-dialog". – david

dodaj swoją odpowiedź poniżej, aby usunąć zachowanie slajdu – jme11

Fiddle o kodzie: http://jsfiddle.net/KqXBM/

którego się odnosimy fadeOut metody jQuery, która jest nie tylko to, co robi Bootstrap fade klasa. Jeśli chcesz osiągnąć ten efekt, nie polegaj na bibliotekach BS i używaj jQuery.

Źródło

2014-05-21 19:40:50 punund

Dzięki za skrzypce! Nie przejmuję się korzystaniem z biblioteki BS, jQuery będzie w porządku. Po prostu nie wiem, jak zastosować go do mojego modala. – henrywright

Przejścia są w css i powodują modalne animowanie i przesuwanie w dół. Jeśli używasz mniej, można zmodyfikować te linie w modal.less aby niezależnie od zachowania chcesz wykorzystaniem wstawek przejściowych przewidzianych w wstawek lub komponentowego animations.less (lub własne):

// When fading in the modal, animate it to slide down 
    &.fade .modal-dialog { 
    .translate(0, -25%); 
    .transition-transform(~"0.3s ease-out"); 
    } 
    &.in .modal-dialog { .translate(0, 0)}

jeśli nie używasz LESS lub oficjalnego portu Sass, możesz po prostu skorzystać z kaskadowego zachowania arkuszy stylów i dodać swoje nadpisanie do niestandardowego pliku css, który jest ładowany po pliku bootstrap.css.

.modal.fade .modal-dialog { 
     -webkit-transform: translate(0, 0); 
     -ms-transform: translate(0, 0); // IE9 only 
      transform: translate(0, 0); 

}

Źródło

2014-05-21 19:47:47 jme11

Fade in i out Bootstrap 3 modalny

Odpowiedz

Powiązane problemy