Всем доброго времени суток. Сегодня речь пойдет о модальных окнах, и на их примере мы реализуем кнопку "Заказать обратный звонок". Наверняка вы видели на множестве лендингов такую кнопку, при нажатии на которую появляется контактная форма с затемнением общего фона. Именно такой функционал мы и реализуем сегодня.
Обычно кнопку "заказать обратный звонок" располагают в правом верхнем углу. Можете поэкспериментировать с расположением, но помните о том, что люди уже привыкли видеть этот элемент именно там, хотя, - это больше относится к сайтам бизнес тематики и услуг.
Конечно, в большинстве случаев модальные окна делают с применением javascript, но сегодня мы попробуем обойтись только средствами css, и не будем нагружать наш landing page лишним скриптом.
И напоследок, скажу, что я не заморачивался с дизайном контактной формы, просто хотел передать суть того, как реализуется подобный эффект, так что прошу сильно не пинать. Просто опишу основные моменты, а вы потом подправите, как вам будет угодно.
О том, как настроить контактную форму можно почитать в этих статьях:
- Создание формы обратной связи
- Контактная форма с чекбоксами и выпадающим списком
- Отправка формы без перезагрузки страницы
Для того, чтобы статья не получилась очень длинной, я приведу только html разметку, а остальное вы сможете посмотреть, скачав исходник.
Будем реализовывать такой функционал: :)
Еще раз повторюсь - это просто небольшой шаблончик, который вы потом подправите под свой дизайн. Вызываться это все будет нажатием на кнопку.
Первое, что нужно сделать, это подключить таблицу стилей (less), представленную в исходнике. Я очень подробно описал его комментариями, посмотрите и внесите правки.
Html структура очень проста. Размещаем эту ссылку в нужное место на сайте. Туда, где вы планируете вывести кнопку "заказать обратный звонок":
<a href="#modal" class="button openModal">Заказать обратный звонок</a>
Теперь нужно создать контейнер модального окна:
<div id="modal" class="modal"> <div> <div class="text"> содержимое модального окна </div> <a href="#close" title="Закрыть"></a> </div> </div>
Я добавил небольшую контактную форму, получилось так:
<div id="modal" class="modal"> <div> <p>Оставьте ваш телефон<br/>и наш консультант свяжется с вами</p> <form id="backPhone" name="backPhone"> <input name="telephone" type="Tel" id="telForm" maxlength="20" placeholder="Введите ваш телефон" required=”required” /> <button id="telButton" type="submit" form="backPhone">Получить прайс </button> </form> <a href="#close" title="Закрыть"></a> </div> </div>
Не стал публиковать таблицу стилей, можете скачать исходник здесь:
А с html разметкой - все. Так вот просто. Преимущества этого способа в том, что модальное окно можно вызывать несколько раз на странице и в том, что не используются скрипты.
Как вы могли заметить, я написал, что использовал less. Посмотрите на структуру. Я не использовал и 5% от возможностей препроцессора (только вложенность), так как только начал изучать его, но планирую в будущем чаще применять. Вот хотел спросить у вас, как лучше. Не против ли вы, если примеры кода будут не в CSS а less? У меня Google chrome и Яндекс браузер отказались компилировать less в css без открытия файла через Денвер или OpenServer. На Мазила и IE - проглотили. Так что, скорее всего, буду выкладывать обычные CSS стили.
А на сегодня - все! Всем пока!
Если нет желания создавать подобную кнопку самому, рекомендую обратить внимание на онлайн консультантов, которые позволяют реализовать эту функцию и имеют много других дополнительных возможностей.