Центрируем модальное окно по вертикали в Bootstrap 3

15.08.2018 | Написал

В 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"

Нет комментариев.

Добавить комментарий

Ваш e-mail не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.