Twitter Bootstrap modal: Как убрать эффект Slide down

Есть ли способ изменить анимацию модального окна Twitter Bootstrap с эффекта слайда вниз на fadeIn или просто показать без слайда? Я прочитал документацию здесь:

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

Но они не упоминают никаких вариантов изменения эффектов модального слайда.

Просто возьмите fadeкласс из модального div.

В частности, изменить:

<div class="modal fade hide">

чтобы:

<div class="modal hide">

ОБНОВЛЕНИЕ: для bootstrap3, hideкласс не нужен.

Модалы, используемые начальной загрузкой, используют CSS3 для предоставления эффектов, и их можно удалить, удалив соответствующие классы из контейнера модальных элементов div:

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

Как вы можете видеть, этот модал имеет класс .fade, означающий, что он настроен на плавность, и .in, значит, он будет скользить. Так что просто удалите класс, связанный с эффектом, который вы хотите удалить, который в вашем случае является просто .inклассом.

Изменить: Просто запустил несколько тестов, и кажется, что это не так, .inкласс добавляется с помощью javascript, хотя вы можете изменить его поведение slideDown с помощью css следующим образом:

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

демонстрация

Если вы хотите, чтобы модальное затухание вместо того, чтобы скользить (почему это так .fadeили иначе вызывается ?), Вы можете перезаписать класс в вашем CSS-файле или напрямую bootstrap.css:

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

Если вы не хотите никакого эффекта, просто удалите fadeкласс из модальных классов.

Я полагаю, что большинство этих ответов относится к начальной загрузке 2. Я столкнулся с той же проблемой для начальной загрузки 3 и хотел поделиться своим исправлением. Как и мой предыдущий ответ для bootstrap 2, это все равно приведет к исчезновению непрозрачности, но НЕ выполнит переход слайдов.

Вы можете изменить файлы modals.less или theme.css, в зависимости от вашего рабочего процесса. Если вы не провели качественного времени с меньшими затратами, я очень рекомендую это.

за меньший, найдите следующий код в MODALS.less

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

то изменить -25%к0%

В качестве альтернативы, если вы используете только CSS, найдите следующее в 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;
}

а затем изменить -25%к 0%.

Я решил это, переопределив .modal.fadeстили по умолчанию в моей собственной таблице стилей LESS:

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

Это сохраняет анимацию постепенного появления / исчезновения, но удаляет анимацию скольжения вверх / вниз.

Я нашел лучшее решение, которое удаляет слайд, но оставляет исчезновение , путем добавления следующего CSS в файл CSS по вашему выбору, который вызывается после 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;
}

Мне тоже не понравился эффект слайда. Чтобы исправить это, все, что вам нужно сделать, это сделать topатрибут одинаковым для обоих .modal.fade и modal.fade.in. Вы также можете снять top 0.3s ease-outпереходы, но не мешает оставить его. Мне нравится этот подход, потому что работает постепенное исчезновение, просто убивает слайд .

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

Если вы ищете ответ по начальной загрузке 3, посмотрите здесь

Вы также можете перезаписать bootstrap.css, просто удалив "top: -25%;"

После удаления модальное пространство будет просто исчезать и исчезать без анимации слайдов.

Просто удалите класс исчезновения, и если вы хотите, чтобы на модале выполнялось больше анимаций, просто используйте классы animate.css в вашем модале.

Я работаю с bootstrap 3 и модальным плагином Durandal JS 2. Этот вопрос был в топе результатов Google, и поскольку ни один из приведенных выше ответов не помог мне, я решил поделиться своим решением для будущих посетителей.

Я переопределяю код Less по умолчанию в Bootstrap с помощью своего собственного less:

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

Таким образом, у меня остался только эффект затухания, а не слайддаун.

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

Вопрос был ясен: удалите только слайд: вот как это изменить в Bootstrap v3

В modals.less закомментируйте оператор перевода:

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

посмотрите на 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;
}

Хотел обновить это. Большинство из вас еще не завершили эту проблему. Я использую Bootstrap 3. Ни одно из исправлений выше не сработало.

чтобы убрать эффект слайда, но сохранить эффект затухания. Я вошел в программу начальной загрузки css и (отметил следующие селекторы) - это решило проблему.

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

Следующий CSS работает для меня - Использование Bootstrap 3. Вам нужно добавить этот CSS после стили Boostrap -

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

.modal.fade {
   transition: none; 
}

просто удалите класс 'fade' из модального класса

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

так как

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