Август 2017
Автор: Рубрика: Верстка Комментариев нет

Плагин magnific popup для всплывающего окна формы


Плагин magnific popup для всплывающего окна формы

Сделаем в сплывающем окне форму и обработаем эту форму.

Есть ссылка отправить заказ.

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

Для этого подключим плагин magnific-popup.

C помощью bower пишем в окне команд bower i magnific-popup.

Подключим css стили и скрипт js плагина

подключим плагин magnific-popup

Добавим класс hidden

Класс hidden предназначен для скрытия элементов формы.

Добавить в него нашу форму.

У формы будет id=form1, добавим его в ссылку после решетки href=#form1 и зададим новый класс popup, которому присвоим функцию всплывающего окна через скрипт.

Код в index.html.

Добавим класс hidden

Скрипт для открытия формы

Сейчас при нажатии в браузере на ссылку отправить заказ, ничего не произойдет.

Для этого пропишем в common.js строку и проверим нажатие на ссылку.

свплывающая форма

Оформим всплывающую форму стилем.

Зайдем в main.sass и добавим стили css форме.

  • Отступы padding: 70px 30px сверху и сбоку.
  • Цвет фона сделаем белый.
  • max-width: 320px, чтобы на мобильных устройствах форма не вышла за пределы экрана.
  • margin: auto для появления формы посередине.
  • Кнопка закрыть форму уезжает поэтому у формы зададим position: relative.

Код в main.sass.

Оформлять форму можно как угодно.

Тут рассмотрим основной принцип всплывающей формы.

Комментариев нет