Создаем модальное окно bootstarp 3

Размещаем модальные окна только в теге 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 он содержит элементы с классами.

1. modal-header тут добавим заголовок h3 и кнопка закрытия окна с классом close.
2. modal-body тег p с текстом содержание.
3. modal-footer с кнопкой btn закрытия модального окна. Можно ее не добавлять.

Создаем кнопку при нажатии на нее, будет появляться модальное окно.

Создаем кнопку с типом button и классом btn, второй класс btn-mod.

Зададим для появления окна data-toggle=modal и второе значение, какое окно будет появляться data-target=#modal1, этот идентификатор есть у модального окна, мы его записали суда.

Проверим нажатие на кнопку в браузере.

Чтобы модальное окно появлялось плавно, добавим класс fade у окна.

Код в index.html.

Стилизуем модальное окно.

У всех модальных окон есть синяя рамка по умолчанию, чтобы ее убрать добавим кнопке btn в фокусе &:focus свойство outline: none.

Между секциями, у окна есть серая полоска, у класса modal-header уберем ее border-bottom: none.

Уберем закругления у окна modal-content свойством border-radius: 0

Код в main.sass.