Центрируем модальное окно по вертикали в Bootstrap 3
15.08.2018 | Написав eugenem
В Bootstrap 3.x модальные окна имеют фиксированный отступ от верхнего края. Когда окно небольшого размера, это не совсем правильно. Удобнее доя пользователя показывать его по центру окна браузера. Делаем это так:
1. добавляем немного стилей для модального окна:
.modal-dialog-centered {margin-top: 0;margin-bottom: 0;height: 100vh;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;} .modal.fade .modal-dialog-centered {-webkit-transform: translate(0, -100%);transform: translate(0, -100%);} .modal.in .modal-dialog-centered {-webkit-transform: translate(0, 0);transform: translate(0, 0);} |
Тем самым мы сделаем модальное окно с классом флексбоксовым блоком с выравниваем по центру окна.
2. Блоку .modal-dialog добавляем класс .modal-dialog-centered, чтоб было вот так:
<div class="modal-dialog modal-dialog-centered"> ... </div> |
Рубрика: Веброзробка
Коментарі читачів статті "Центрируем модальное окно по вертикали в Bootstrap 3"
Немає коментарів.