Есть ли способ изменить анимацию окна Twitter Bootstrap Modal с эффекта слайд-эффекта на fadeIn или просто отображение без слайда? Я прочитал здесь документацию:
http://getbootstrap.com/javascript/#modals
Но они не упоминают никаких вариантов изменения модальных эффектов скольжения тела.
Просто выньте класс fade из модального div.
В частности, измените:
<div class="modal fade hide">
в
<div class="modal hide">
UPDATE: Для bootstrap3 класс hide не нужен.
Модалы, используемые бутстрапом, используют 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;
}
Если вы хотите, чтобы модальное затухание, а не скольжение (почему оно называется .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. Я столкнулся с той же проблемой для 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%.
Я решил это, переопределив стили по умолчанию .modal.fade в моей собственной таблице стилей LESS:
.modal {
&.fade {
.transition(e('opacity .3s linear'));
top: 50%;
}
&.fade.in { top: 50%; }
}
Это приводит к постепенному исчезновению/уменьшению анимации, но удаляет анимацию слайд-шоу/слайд вниз.
Мне тоже не понравился эффект слайда. Чтобы исправить это, вам нужно сделать атрибут 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, смотрите здесь
Я нашел лучшее решение, которое удаляет слайд, но оставляет 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;
}
вы также можете перезаписать bootstrap.css, просто удалив "top: -25%;"
после удаления модад будет просто исчезать и выходить без анимации слайдов.
Просто удалите класс fade, и если вы хотите, чтобы анимация выполнялась на Modal, просто используйте классы animate.css в вашем Modal.
Я работаю с бутстрапом 3 и модульным плагином Durandal JS 2. Этот вопрос был на вершине результатов Google, и, поскольку ни один из вышеперечисленных ответов не работает для меня, я думал, что поделюсь своим решением для будущих посетителей.
Я переопределяю код по умолчанию 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. Ни один из исправлений выше не работал.
чтобы удалить эффект слайда, но сохраните затухание. Я зашел в 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)*/}
Следующий 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;
}