Сделаем в сплывающем окне форму и обработаем эту форму.
Есть ссылка отправить заказ.
При клике на ссылку или кнопку должно появиться всплывающее окно.
Для этого подключим плагин magnific-popup.
C помощью bower пишем в окне команд bower i magnific-popup.
Подключим css стили и скрипт js плагина
Добавим класс hidden
Класс hidden предназначен для скрытия элементов формы.
Добавить в него нашу форму.
У формы будет id=form1, добавим его в ссылку после решетки href=#form1 и зададим новый класс popup, которому присвоим функцию всплывающего окна через скрипт.
Код в index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<a href="#form1" class="popup">отправить заказ</a> <div class="hidden"> <form id="form1"> <input type="hidden" name="project_name" value="Site Name"> <input type="hidden" name="admin_email" value="admin@mail.com"> <input type="hidden" name="form_subject" value="Form Subject"> <input type="text" name="Name" placeholder="You name..." required><br> <input type="text" name="E-mail" placeholder="You E-mail..." required><br> <input type="text" name="Phone" placeholder="You phone..."><br> <button>Send</button> </form> </div> |
Скрипт для открытия формы
Сейчас при нажатии в браузере на ссылку отправить заказ, ничего не произойдет.
Для этого пропишем в common.js строку и проверим нажатие на ссылку.
|
1 2 3 |
$(function() { $(".popup").magnificPopup(); }); |
Оформим всплывающую форму стилем.
Зайдем в main.sass и добавим стили css форме.
- Отступы padding: 70px 30px сверху и сбоку.
- Цвет фона сделаем белый.
- max-width: 320px, чтобы на мобильных устройствах форма не вышла за пределы экрана.
- margin: auto для появления формы посередине.
- Кнопка закрыть форму уезжает поэтому у формы зададим position: relative.
Код в main.sass.
|
1 2 3 4 5 6 |
form padding: 70px 30px background-color: #fff max-width: 320px margin: auto position: relative |
Оформлять форму можно как угодно.
Тут рассмотрим основной принцип всплывающей формы.