Хостинг от 165 ₽/месяц. Перенос сайтов и месяц на тестирование - бесплатно!
HTML Academy

Модальное окно на Bootstrap

()

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

Очень часто в блогах и интернет-магазинах можно встретить модальные окна, всплывающие при заходе посетителя на страницу, при его уходе с неё, или же появляющиеся через определённый промежуток времени. Все они хорошо повышают конверсию сайта при грамотной настройке, и в следующий статьях я обязательно подробно о них расскажу.

В этой же статье рассмотрим, как подключить модальное окно на сайт,  которое появляется при нажатии на ссылку. А делать мы это будем с помощью фреймворка Twitter Bootstrap.

Итак, первое, что необходимо сделать - это подключить bootstrap к вашему ресурсу. Как это осуществить, можно прочитать здесь.

Большинство современных систем управления (Joomla,WordPress, OpenCart) уже из "коробки" укомплектованы Bootstrap, и для реализации модальных окон на сайтах, работающих на любой из этих CMS, понадобится прописать всего - лишь пару строчек кода. Чтобы узнать, подключен ли фреймворк, необходимо открыть исходный код вашего сайта в браузере и проверить ссылки на css и js файлы в хедере и футере. Если там присутствуют ссылки на файлы bootstrap.min.css, bootstrap.min.js, то инструментарий от Twiter уже подключен к вашему ресурсу.

Реализация модального окна на bootstrap происходит следующим образом:

1. Прописываем ссылку, при нажатии на которую будет появляться всплывающее окно:

<a class="popup_form" href="#" data-toggle="modal" data target="#phone_form">Всплывающая форма </a>

2. Далее идёт код самого окна, который выглядит так:

<div id="phone_form" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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 можно почитать здесь.

Понравилась статья?

Оцените!

Средняя оценка / 5. Количество оценок:

Оценок пока нет. Поставьте оценку первым!

Добавить комментарий

Ваш адрес email не будет опубликован.

*

code