Модальное окно на Bootstrap 4/5 (2)

модальное окно на bootstrap

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

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

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

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

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

После того, как все подготовительные работы завершены, подключение модального окна на сайте  происходит следующим образом:

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

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

 

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

<div id="phone_form" class="modal fade in">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3>Заявка на обратный звонок</h3>
</div>
<div class="modal-body">
<h4>Оставьте заявку, и наш менеджер проконсультирует вас по всем имеющимся вопросам!</h4>
<form action="contact-form.php" method="post">
<div class="container">
<div class="row">
<div class="col-sm-6"><label>Представьтесь:</label>
<input class="form-control input-lg" name="name" required="" type="text" placeholder="Ваше имя" /></div>
</div>
<div class="row">
<div class="col-sm-6"><label>Ваш телефон:</label>
<input class="form-control input-lg" name="tel" required="" type="tel" placeholder="8-921-1234567" /></div>
</div>
<div class="row">
<div class="col-sm-6"><button class="btn btn-primary" type="submit">Отправить </button></div>
</div>
</div>
</form></div>
</div>
</div>
</div>

В первой строке указывается id формы: div id="phone_form". Следует обратить внимание, что этот же id  указывается в активной ссылке на форму: data target="#phone_form". Id может быть любым на ваше усмотрение, но эти значения в обоих случаях обязательно должны совпадать.

Демо всплывающей формы

Форма полностью адаптивна и автоматически подстраивается под размер экрана мобильного устройства.


Оставить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *