Есть ли способ изменить анимацию модального окна 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;
}
modal.fade, .modal-backdrop.fadeт.д ...
Если вы хотите, чтобы модальное затухание вместо того, чтобы скользить (почему это так .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класс из модальных классов.
inкласс добавлен Bootstrap.js
Я полагаю, что большинство этих ответов относится к начальной загрузке 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, посмотрите здесь
Просто удалите класс исчезновения, и если вы хотите, чтобы на модале выполнялось больше анимаций, просто используйте классы 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;
}