Модальное окно на Bootstrap. Стилизация
Чаще всего в модальных окнах размещают формы, всплывающая форма заявки на лендинге – это классика. У Bootstrap 4, есть такой компонент, как модальное окно. Однако, мне трудно себе представить, где можно его использовать, как есть. Без какой-либо стилизации под дизайн сайта.
На этом уроке мы поместим форму заявки в модальное окно. Модальное окно откроется при клике по кнопке, затемнив всю страницу.
В документации Bootstrap, в разделе Components --> Modal, вы увидите живые примеры с модальными окнами и много различных классов. Нас интересуют, классы, отвечающие за правильную работу модального окна, а не за внешнее оформление. Дефолтные CSS стили нам предстоит изменить, на кастомные.
Кнопка вызова модального окна
Внутри тега вашей кнопки, должно быть два обязательных data атрибута от Bootstrap.
data-toggle="modal"
data-target="#exampleModal"
Идентификатор exampleModal связывает кнопку с модальным окном. Название данного идентификатора может быть любым, главное чтобы оно было одинаковым как у кнопки, так и у модального окна.
<button type="button" class="имя_вашего_класса" data-toggle="modal" data-target="#exampleModal">Оставить заявку</button>
Для стилизации кнопки задаете свой класс и прописываете ему CSS правила.
имя_селектора {
// правила
}
Модальное окно
Копируете первых три блока из примера со всеми классами и идентификатором. Напоминаю, что название id у модального окна должно совпадать с называнием id у кнопки.
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
..ваша разметка..
</div>
</div>
</div>
Внутри обязательных тегов, вставляете свою разметку. Если внутри у вас будет форма заявки, то HTML код будет примерно таким.
<form class="form" action="/" method="post">
<div class="form__group">
<input type="text" placeholder="Ваше имя">
</div>
<div class="form__group">
<input type="email" placeholder="Ваш e-mail">
</div>
<div class="form__group">
<input type="tel" placeholder="Ваш телефон">
</div>
<button class="btn" type="submit">Оставить заявку</button>
</form>
Как поставить модальное окно по центру
Для вертикального выравнивания у Bootstrap имеется класс modal-dialog-centered, который нужно добавить в div с классом modal-dialog.
<div class="modal-dialog modal-dialog-centered" role="document"> </div>
Размер модального окна
Модальные окна имеют три класса-модификатора, определяющих их максимальную ширину.
-sm // 300px
-lg // 800px
-xl // 1140px
По умолчанию максимальная ширина модального окна – 500 пикселей. Для изменения дефолтного размера, следует добавить класс-модификатор к .modal-dialog.
Как закрыть модальное окно
Модальное окно закроется при клике в любом месте страницы или по кнопке с крестиком. Если не нужна стилизация, то можете вставить в разметку тег button, скопировав его из Bootstrap.
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Если внешний вид бутстраповского крестика отличается по дизайну, то стилизуйте как вам нужно. Добавьте к блоку с закрывающей иконкой атрибуты с классами.
data-dismiss="modal"
aria-label="Close"
Как изменить цвет и прозрачность затемнения
Необходимость в замене цвета затемнения страницы, может исходить из дизайн-макета. Проще всего это сделать, изменив значения у переменных.
$modal-backdrop-bg: #000;
$modal-backdrop-opacity: .7;
Не стоит ничего менять в файлах Bootstrap, создайте свой файл с переменными и переопределите, прописав свои значения.
Заключение
Умение стилизовать компоненты Bootstrap позволяет верстальщикам, не знающим JavaScript, делать простенькие пользовательские интерфейсы. Если хотите узнать об этом больше, то переходите на промо-страницу видео-курса по Bootstrap .
-
Создано 11.09.2019 10:07:26
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.