Доброго времени суток всем желающим изучить верстку сайтов при помощи фреймворка Bootstrap. Сегодня мы с вами во всех деталях разберем такой плагин, как Bootstrap popup, т.е. модальные всплывающие окна. Я поведаю вам, что они из себя представляют и для чего используются, расскажу, благодаря каким программным встроенным инструментам ими можно управлять и редактировать.
Также вы сможете изучить все классы, атрибуты, методы и события, отвечающие за работу диалоговых окон, и применить свои знания на практике, опробовав предложенные примеры. Ну а теперь давайте переместимся на основную часть статьи.
Приятно познакомиться! Я Modal Plugin!
«Что же все-таки из себя представляет данный плагин изучаемого фреймворка?» — спросите вы. Вот вам ответ: он отвечает за формирование подложки и контента модального всплывающего окна, его настройку и отображение. Само по себе диалоговое окно используют для вывода некого сообщения пользователю. Его работу в некотором отношении можно сравнить с работой alert в языке JavaScript.
Оно может быть как информационным (это обычные уведомления, пояснения, отчет о выполненных действиях и т.д.), так и включать в себя формы для заполнения, например, данных для регистрации или входа в систему.
Следующий вопрос: «Где можно встретить modal window?» На самом деле вы сталкиваетесь с ними каждый день по несколько десятков раз, ну если вы конечно активный пользователь интернета. Да что тут говорить, на сегодняшний день все пользуются социальными сетями. И вы уже наверняка не обращаете внимание на появляющиеся уведомления.
В качестве примера можно привести популярную соцсеть ВКонтакте. При регистрации в системе новому юзеру отображается множество диалоговых окон-подсказок. Также периодически перед вами всплывает окошко с просьбой подтвердить или проверить актуальность номера телефона или электронной почты.
Помимо этого, довольно-таки часто можно встретить модальные окна, в которые внедряют формы (form) регистрации, входа, оформления покупок, неких пунктов меню (menu) и т.д.
Я – инструкция. И меня следует прочитать, а не пролистать далее!
Данная глава действительно важна, так как здесь я расскажу вам, каким образом создается стандартное диалоговое окно при помощи Bootstrap 3.
Итак, для начала немного справочной, но полезной информации. Вы можете подключить все компоненты фреймворка, прописав в пути привычное «bootstrap.min.js». Однако если вам нужно использовать только описываемый плагин, то вы можете заменить привычную концовку на «modal.js».
Ну, а теперь переходим к созданию стандартного появляющегося диалогового окна. Для этого в коде следует обязательно описывать три составляющие:
- Триггер, который будет привязываться к создаваемому объекту и открывать его (например, кнопка);
- Оболочка окна;
- Контент, выводимый юзеру.
Начнем создавать по порядку. Для начала пропишем основную разметку 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 27 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Simple modal window</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#Message {
background: rgba(70, 130, 180, .4);
}
.modal-content { background:#E0FFFF;}
</style>
</head>
<body>
<div class="container">
<h2>При нажатии на кнопку появится окно.</h2>
<!-- Триггер -->
<!-- Оболочка -->
<!-- Информационный текст-->
</div>
</body>
</html> |
Теперь начнем создавать триггер. У меня это будет по стандарту кнопка. После соответствующего комментария добавьте следующую строку кода:
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#Message">Нажми на меня</button>
В ней прописаны два основных атрибута: data- toggle со значением «modal», который отвечает за открытие модального окна, и data-target, который указывает на конкретный идентификатор с именем «Message» и таким образом привязывает окошко к кнопке.
Переходим к следующему этапу. Чтобы создать каркас для всплывающего уведомления, следует после соответствующего комментария вставить строки
<div class="modal fade" id="Message" role="dialog">
<div class="modal-dialog">
</div>
</div>
Обратите внимание на идентификатор. Его значение должно совпадать со значением data-target.
И теперь заполним сообщение контентом, прописав следующий код внутри блока с классом .modal-dialog.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!-- Информационный текст-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Заголовок сообщения</h4>
</div>
<div class="modal-body">
<h2>Здесь расположен текст уведомления.</h2>
<img src="http://taganrog.rutaxi.ru/img/towns/taganrog/b23172d8-bd87-e011-986b-78e7d1fa76f8.png" alt="Image">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Закрыть</button>
</div>
</div> |
Как вы уже, наверное, догадались, в основной части окна не обязательно использовать все 3 класса. Иногда достаточно просто указать .modal- body.
Не хочу значения по умолчанию, хочу разнообразия!
Все всплывающие окошки имеют изначально заданную ширину и подстраиваемую высоту (fixed width and dynamic height). Однако разработчики фреймворка предоставляют возможность изменять размеры встроенными средствами, а точнее специальными классами. Это modal-sm, modal-md (указано по умолчанию) и modal-lg. Также текущую характеристику можно настроить в описании стилей. Стоит отметить, что для некоторых задач девелоперы используют также и iframe.
Что еще следует знать о Modal Plugin?
Все необходимые классы мы с вами уже использовали в примерах. Теперь пришло время поговорить о методах, событиях и опциях.
На сегодняшний день существует 4 метода, которые можно вызвать в JS-коде. К ним относятся:
- .modal (опция) – позволяет в JavaScript использовать любую опцию из существующих для данного инструмента;
- .modal («show») – открывает появляющееся окошко;
- .modal («hide») – скрывает объект;
- .modal («toggle») – позволяет отрабатывать переключение между состояниями изучаемого объекта.
Что касается опций, то к их числу относят 3:
- Show – отображает уведомление на экране;
- Keyboard – определяет может ли окно быть закрытым при помощи клавиши Esc;
- Backdrop – позволяет включить или отключить затемнение заднего фона.
Если же говорить о событиях, то их также не много, и они немного похожи между собой. Давайте с вами найдем отличия.
| show.bs.modal | shown.bs.modal |
| Событие выполняется непосредственно перед отображением самого сообщения (но после нажатия на связанный с ним триггер). | Событие выполняется сразу после отображения сообщения. |
| hide.bs.modal | hidden.bs.modal |
| Выполнение event-а происходит перед закрытием объекта (но после нажатия на связанный с ним триггер). | Выполнение происходит после полного скрытия объекта. |
На этой ноте я решил закончить данную публикацию. Если вам было интересно ее читать, то подписывайтесь на мой блог и не забывайте делиться ссылками на понравившиеся статьи с друзьями. До скорой встречи! Пока-пока!
С уважением, Роман Чуешов
