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

167

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

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

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

ramz15
источник

Ответы:

359

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

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

<div class="modal fade hide">

чтобы:

<div class="modal hide">

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

Роза Перроне
источник
9
Хотя ФП действительно спрашивал, как заставить его исчезать, поэтому некоторые из этих ответов являются правильными для альтернативного формирования вопроса. Думаю, это просто плохой вопрос, потому что это действительно 2 вопроса в одном, и никто не ответил на оба вопроса в одном ответе.
Umassthrower
1
Вам не нужно изменять источники начальной загрузки. Вам нужно только изменить свой HTML. Это правильный ответ.
mpccolorado
31
@umassthrower правильно. Только как не переходить ответили. Вопрос о том, как исчезать, но не выпадать сверху, не покрывается этим ответом.
Synesso
26
Я не понимаю, как это правильный ответ ... это делает модальное появление без исчезновения, и OP попросил удалить СЛАЙД, но не FADE ...
Шон Тейлор
2
Я жду, чтобы исчезнуть и убрать слайд, и этот ответ не поможет. Странно, что начальный загрузчик использовал их класс затухания, чтобы также обрабатывать эффект слайда для модала, поскольку затухание в их CSS совершенно отдельное.
Leeish
36

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

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

Андрес Ильич
источник
2
Вы также должны добавить его на задний план: и modal.fade, .modal-backdrop.fadeт.д ...
Дэвид Хеллсинг
вероятно, лучше отредактировать файл component-animations.less по той причине, о которой упоминал Дэвид.
Питер Хэнли,
класс замирание не является обязательным, есть лучший (и предпочтительный в BS документации) ответ на Розе ниже
umassthrower
@umassthrower этот ответ довольно старый, на момент написания этого выбора не существовало.
Андрес Ильич
Я не уверен, что комментарий правильный, так как BS 2.0 был выпущен за 3 месяца до этого ответа, и я удалил fade из моих модалов прошлым летом при использовании v2.0. Возможно, они не меняли документацию до этого. Не знаю.
Umassthrower
30

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

Lorem Monkey
источник
1
Верха: 50% , кажется, вызывают проблемы , когда диалог закрывается. Диалог, кажется, открывается в том же месте, что и раньше; но перед закрытием на долю секунды он перемещается в центр, а затем закрывается. Atleast в Chrome. Кто-нибудь еще это заметил?
Мохитп
1
@lorem обезьяна - ура, хотел исчезнуть, но не слайд. Если кому-то нужна версия scss / compass ... .modal.fade {@include transition (opacity .2s linear, none);}
Саймон
1
@mohitp Вместо «top: 50%» я использую «top: 25%». Я также добавил .modal.fade.in {top: 25%; } Кажется, сделал трюк для меня. Не уверен, почему это работает, так как у меня нет класса "in" в моем модале.
Даррен
2
@dkrape inкласс добавлен Bootstrap.js
Дейв Саг
Это правильный ответ, отвечающий на обе части вопроса.
Мэтт
26

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

viggity
источник
2
Я бы переопределил эти стили в пользовательской таблице стилей вместо редактирования таблицы стилей Bootstrap / Less.
Bassem
Это ЕДИНСТВЕННОЕ простое решение CSS для получения FADE без слайдов. Спасибо.
Давидегз
18

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

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

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

Алекс Бэйн
источник
Спасибо. В итоге я использовал 10% вместо 50% и сократил переход с 0,3 до 0,25, что мне кажется более плавным.
Исапир
Открытие и закрытие модального окна несколько раз перемещает его вверх по странице с течением времени.
Leeish
12

Я нашел лучшее решение, которое удаляет слайд, но оставляет исчезновение , путем добавления следующего 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;
}
justinazz
источник
1
Это лучший ответ для Bootstrap 3, чтобы сохранить затухание, но убрать слайд вниз
NickH
2
Это решение отлично работает и для Bootstrap 4. Спасибо!
приблизительно
11

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

viggity
источник
1
Два верхних примера, не относящихся к LESS, пренебрегают объявлением «.modal.fade.in», которое заставляет модальный переход немного при закрытии. Этот отлично работает. Вот это на практике: jsfiddle.net/dkrape/4EwFq
Даррен
В основном это работает, но я вижу ярко-синюю горизонтальную линию (во всех Safari, Firefox и Chrome) примерно на 32 пикселя выше моего Модального, когда она появляется.
Дэйв Саг
2

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

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

Амр Морси
источник
2

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

Капил Кумар
источник
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
.modal.fade, .modal.fade .modal-dialog {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}
С.М. Аднан
источник
Это уберет анимацию с показа и скрытия. У меня отлично работает и с Angular-Bootstrap ui.
С.М. Аднан
1

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

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

&.fade .modal-dialog {
  //   .translate(0, -25%);
Дерри Биркетт
источник
1

посмотрите на 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;
}
Константин XFlash Стратигенас
источник
0

Хотел обновить это. Большинство из вас еще не завершили эту проблему. Я использую 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)*/}
tmarois
источник
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; 
}
Игнасио Васкес
источник
0

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

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

так как

class="modal bs-example-modal-lg"
Адейсинг
источник