Twitter Bootstrap modal: Как удалить эффект сдвига вниз

Ответ 1

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

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

<div class="modal fade hide">

в

<div class="modal hide">

UPDATE: Для bootstrap3 класс hide не нужен.

Ответ 2

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

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

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

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

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

Демо

Ответ 3

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

Ответ 4

Я считаю, что большинство из этих ответов посвящено загрузке 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%.

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

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

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

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

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

Ответ 11

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

Ответ 12

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

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

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

Ответ 13

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

Ответ 14

Требуется обновить это. Большинство из вас не выполнили эту проблему. Я использую 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)*/}

Ответ 15

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

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

.modal.fade {
   transition: none; 
}