it-swarm.com.ru

Twitter Bootstrap модальный: Как убрать эффект Slide down

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

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

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

159
ramz15

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

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

<div class="modal fade hide">

чтобы:

<div class="modal hide">

PDATE: Для начальной загрузки класс hide не нужен.

348
Rose Perrone

Модалы, используемые bootstrap, используют 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;
}

Демо

36
Andres Ilich

Если вы хотите, чтобы модальное затухание вместо того, чтобы скользить (почему он называется .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 из модальных классов.

30
lorem monkey

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

Вы можете изменить файлы 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%.

24
viggity

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

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

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

18
Alex Bain

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

Мне тоже не понравился эффект слайда. Чтобы исправить это, все, что вам нужно сделать, это сделать атрибут 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%;
}

Если вы ищете ответ bootstrap 3, смотрите здесь

11
viggity

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

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

2
Amr Morsy

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

2
Kapil Kumar

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

Я работаю с 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)}
}

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

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

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

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

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

Следующий 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; 
}
0
Ignacio Vazquez

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

чтобы убрать эффект слайда, но сохранить эффект затухания. Я вошел в bootstrap 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)*/}
0
timothymarois