Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

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

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

Размещаем модальные окна только в теге body.

Модальные окна появятся, если добавить bootstrap от 3 версии.

Скачать можно с официального сайта, последнюю версию.

Нам понадобится три файла из архива это

  • bootstrap.css
  • bootstrap-theme.css
  • скрипт bootstrap.js

их подключим к проекту чистого шаблона gulp.

Также желательно обновить файл у jquery, файл скачаем с официального сайта данного плагина.

bootstrap подключим к проекту чистого шаблона gulp.

Сделаем структуру модального окна в index.html.

Верхний див у модального окна будет с классом modal и идентификатором id=modal1, на конце один.

Следующий блок с классом modal-dialog.

К этому классу можно приписывать какого размера будет окно, если маленькое то пишем modal-sm или большое modal-lg.

Посмотреть какой класс подойдет на примере можно на официальном сайте bootstrap.

modal-sm или большое modal-lg у модального окна

Следующий блок с классом 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-header уберем ее border-bottom: none.

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

Код в main.sass.

Комментариев нет

Комментарии:

Комментарии запрещены