Чи є спосіб змінити анімацію вікна Twitter Bootstrap Modal з ефектом ковзання на fadeIn або просто відобразити без слайда? Я читав тут документацію:
http://getbootstrap.com/javascript/#modals
Але вони не згадують жодних варіантів зміни ефектів слайдів модального тіла.
Відповіді:
Просто вийміть fadeклас із модального діва.
Конкретно змінити:
<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, хоча ви можете змінити поведінку on 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. Я зіткнувся з тим же питанням для bootstrap 3 і хотів поділитися своїм виправленням. Як і в моїй попередній відповіді на завантажувальний інструмент 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стилі за замовчуванням у власному таблиці менше стилів:
.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, подивіться тут
Просто видаліть клас зникнення, і якщо ви хочете, щоб більше анімацій було виконано на Modal, просто використовуйте класи animate.css у своєму Modal.
Я працюю з завантажувальним пристроєм 3 та модульним плагіном Durandal JS 2. Це питання перебувало на вершині результатів Google, і оскільки жоден з вищезазначених відповідей не працює для мене, я подумав, що поділюсь своїм рішенням для майбутніх відвідувачів.
Я переосмислюю менший код Bootstrap за меншою мірою на цей менше:
.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. жодне з вище виправлень не працювало.
щоб зняти ефект слайда, але не зникнути. Я зайшов у bossstrap 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;
}просто видаліть клас "fade" з модального класу
class="modal fade bs-example-modal-lg"як
class="modal bs-example-modal-lg"