Доброго времени суток, дорогой читатель! Сегодня я поделюсь с Вами как легко можно подключить модальное окно на свой сайт. Это очень хороший инструмент для сайта, к примеру с помощью него делают форму обратной связи, форму заказать звонок или выводят некую всплывающую информацию. Для этого мы будем использовать Bootstrap FrameWork, который необходимо будет подключить к Вашему сайту.

Модальное окно лишь выводить информацию. Отправкой, введенных на ней данных, занимается отдельный скрипт.

Модальной окно Bootstrap Modal

Вставляем код, приведенный ниже, в ваш шаблон (или html страницу).

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Заказать звонок
</button> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Заказ звонка</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Заказать</button>
</div>
</div>
</div>
</div>

Этот код можно поделить на два:

  1. вызов окна кнопкой (<!-- Button trigger modal -->)
  2. код модального окна (<!-- Modal -->)

Первое (кнопку) можно разместить в любом удобном месте шаблона, второе (код окна) обязательно должно присутствовать на той же странице, что и кнопка его вызова, но так же может находиться в любом месте шаблона (например, в самом низу).

На этом ознакомление с Bootstrap Modal завершено, пользуетесь и развивайтесь! Пример этого окна можно увидеть на главной странице (Задайте вопрос), созданного мною сайта – Гипермаркет строительных материалов "Хомяк. Всё в дом!", либо на моем сайте (верхнее меню сайта "Задать вопрос").

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.