Модальные (всплывающие) окна - один из самых популярных и востребованных инструментов практически на любом сайте. Формы обратной связи, новости портала, инфо-блоки о скидках, акциях и предложениях - это лишь малая часть того, для чего используются PopUp окна на современных веб - ресурсах.
Очень часто в блогах и интернет-магазинах можно встретить модальные окна, всплывающие при заходе посетителя на страницу, при его уходе с неё, или же появляющиеся через определённый промежуток времени. Все они хорошо повышают конверсию сайта при грамотной настройке, и в следующий статьях я обязательно подробно о них расскажу.
В этой же статье рассмотрим, как подключить модальное окно на сайт, которое появляется при нажатии на ссылку. А делать мы это будем с помощью фреймворка Twitter Bootstrap.
Итак, первое, что необходимо сделать - это подключить bootstrap к вашему ресурсу. Как это осуществить, можно прочитать здесь.
Большинство современных систем управления (Joomla,WordPress, OpenCart) уже из "коробки" укомплектованы Bootstrap, и для реализации модальных окон на сайтах, работающих на любой из этих CMS, понадобится прописать всего - лишь пару строчек кода. Чтобы узнать, подключен ли фреймворк, необходимо открыть исходный код вашего сайта в браузере и проверить ссылки на css и js файлы в хедере и футере. Если там присутствуют ссылки на файлы bootstrap.min.css, bootstrap.min.js, то инструментарий от Twiter уже подключен к вашему ресурсу.
Реализация модального окна на bootstrap происходит следующим образом:
1. Прописываем ссылку, при нажатии на которую будет появляться всплывающее окно:
2. Далее идёт код самого окна, который выглядит так:
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Заказать звонок</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label class="form-control-label" for="recipient-name">Имя</label>
<input id="name" class="form-control" type="text" />
</div>
<div class="form-group">
<label class="form-control-label" for="message-text">Сообщение</label>
<textarea id="message-text" class="form-control"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button">Отправить</button>
</div>
</div>
</div>
</div>
В первой строке указывается id формы: div id="phone_form". Этот же id указывается в активной ссылке на форму: data target="#phone_form". Id может быть любым на ваше усмотрение.
1. Модальные окна всегда располагаются поверх документа и блокируют прокрутку тела сайта
.
2. Чтобы закрыть окно, можно кликнуть на любое место вне его.
3. Все элементы модального окна имеют position: fixed.
На этом все. Мы подключили модальное окно на сайт с помощью Bootstrap. Форма полностью адаптивна и автоматически подстраивается под размер экрана мобильного устройства. Более подробно о модальном плагине Bootstrap можно почитать здесь.
Как сделать форму связи на сайте с помощью php, можно прочитать здесь.
