Размещаем модальные окна только в теге body.
Модальные окна появятся, если добавить bootstrap от 3 версии.
Скачать можно с официального сайта, последнюю версию.
Нам понадобится три файла из архива это
- bootstrap.css
- bootstrap-theme.css
- скрипт bootstrap.js
их подключим к проекту чистого шаблона gulp.
Также желательно обновить файл у jquery, файл скачаем с официального сайта данного плагина.
Сделаем структуру модального окна в index.html.
Верхний див у модального окна будет с классом modal и идентификатором id=modal1, на конце один.
Следующий блок с классом modal-dialog.
К этому классу можно приписывать какого размера будет окно, если маленькое то пишем modal-sm или большое modal-lg.
Посмотреть какой класс подойдет на примере можно на официальном сайте bootstrap.
Следующий блок с классом modal-content он содержит элементы с классами.
- modal-header тут добавим заголовок h3 и кнопка закрытия окна с классом close.
- modal-body тег p с текстом содержание.
- modal-footer с кнопкой btn закрытия модального окна. Можно ее не добавлять.
Создаем кнопку при нажатии на нее, будет появляться модальное окно.
Создаем кнопку с типом button и классом btn, второй класс btn-mod.
Зададим для появления окна data-toggle=modal и второе значение, какое окно будет появляться data-target=#modal1, этот идентификатор есть у модального окна, мы его записали суда.
Проверим нажатие на кнопку в браузере.
Чтобы модальное окно появлялось плавно, добавим класс fade у окна.
Код в index.html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<section> <div class="container"> <div class="row"> <div class="col-sm-12"> <button type="button" class="btn btn-mod" data-toggle="modal" data-target="#modal1">Модальное окно</button> <div class="modal fade" id="modal1"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal"><i class="fa fa-close"></i></button> <h3 class="modal-title">Заголовок</h3> </div> <div class="modal-body"> <p>:Содержание</p> </div> <div class="modal-footer"> <button class="btn" type="button" data-dismiss="modal"></button> </div> </div> </div> </div> </div> </div> </div> </section> |
Стилизуем модальное окно.
У всех модальных окон есть синяя рамка по умолчанию, чтобы ее убрать добавим кнопке btn в фокусе &:focus свойство outline: none.
Между секциями, у окна есть серая полоска, у класса modal-header уберем ее border-bottom: none.
Уберем закругления у окна modal-content свойством border-radius: 0
Код в main.sass.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.modal-dialog margin-top: 15% .modal-header border-bottom: none h3 text-transform: uppercase color: blue text-align: center .btn &:focus outline: none .modal-content border-radius: 0 |