Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Bootstrap popup – модальное всплывающее окно на вашем блоге

Доброго времени суток всем желающим изучить верстку сайтов при помощи фреймворка 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">&times;</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-а происходит перед закрытием объекта (но после нажатия на связанный с ним триггер). Выполнение происходит после полного скрытия объекта.

На этой ноте я решил закончить данную публикацию. Если вам было интересно ее читать, то подписывайтесь на мой блог и не забывайте делиться ссылками на понравившиеся статьи с друзьями. До скорой встречи! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 41 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: