it-swarm.com.ru

Появление и исчезновение Bootstrap 3 модальный

Я дал мой Bootstrap 3 модальный класс 'fade', но модал не 'исчезает', как я ожидаю. Кажется, что скользит сверху, а не исчезает.

Modal:

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

Триггерная кнопка:

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

Чтобы показать пример того, как я ожидаю, что эффект «затухания» будет выглядеть, я создал этот пример: http://jsfiddle.net/spQp5/

Как я могу сделать так, чтобы мой модал «постепенно исчезал»?

8
henrywright

Модальные бутстрепы исчезают по умолчанию. Возможно, он слишком быстро исчезает, чтобы вы могли увидеть? Если вы посмотрите на css, вы увидите, что у них есть настройка переходов, чтобы заставить его исчезать в течение .15 секунд:

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

Изменение значения плавности на одну секунду для демонстрационных целей может показать, что оно на самом деле затухает.

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

Переходы находятся в css и заставляют модал анимироваться и скользить вниз. Если вы используете LESS, вы можете изменить эти строки в modal.less, чтобы получить любое желаемое поведение, используя переходные миксины, представленные в mixins или component-animations.less (или ваши собственные):

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

Если вы не используете LESS или официальный порт Sass, вы можете просто воспользоваться каскадным поведением таблиц стилей и добавить переопределение в пользовательский файл CSS, который загружается после файла bootstrap.css. 

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

 }
10
jme11

Скрипка для вашего кода: http://jsfiddle.net/KqXBM/

Вы ссылаетесь на метод fadeOut в jQuery, который совсем не то, что делает класс Bootstrap fade. Если вам нужно добиться этого эффекта, не полагайтесь на библиотеки BS и используйте jQuery.

0
punund